Cách tạo Widget trượt theo blog có id bất kì cho blogspot

Khi chúng ta truy cập vào 1 trang web thông thường cuộn chuột xuống dưới thì các tiện ích phía trên sẽ ẩn đi. Chúng ta muốn hiển thị Widget có id bất kì khi cuộn chuột xuống dưới phải làm thế nào ? Hôm nayViettin365.com giới thiệu đến các bạn thủ thuật Cách tạo Widget trượt theo blog có id bất kì cho blogspot, với thủ thuật này Widget được chọn hiển thị trượt theo blog sẽ luôn xuất hiện trên giao diện nhìn thấy 

Ảnh minh họa : 

 
Các bước thực hiện :
1. Đăng nhập blogger
2. Xác định Id của Widget luôn hiển thị trượt theo blog :
2.1 . Chọn bố cục và chọn Widget

2.2 .  Xác định Id

ID ví dụ mình làm ở đây Popularpost1

2. Chọn mẫu ==> Chỉnh sửa HTML
3. Dán code bên dưới trước thẻ </body>

<script>
// Sticky widget by Viettin365.com
// Tutorial at http://www.viettin365.com/2013/10/Cach-tao-widget-truot-theo-blog-co-id-bat-ki-cho-blogspot.html
// Free to use or share, but please keep this notice intact.
//<![CDATA[
bs_makeSticky("Popularpost1"); 
function bs_makeSticky(elem) {
    var bs_sticky = document.getElementById(elem);
    var scrollee = document.createElement("div");
    bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
    var width = bs_sticky.offsetWidth;
    var iniClass = bs_sticky.className + ' bs_sticky';
    window.addEventListener('scroll', bs_sticking, false);
    function bs_sticking() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            bs_sticky.className = iniClass + ' bs_sticking';
            bs_sticky.style.width = width + "px";
        } else {
            bs_sticky.className = iniClass;
        }
    }
}
//]]>
</script>

<style>
.bs_sticking {background:#f2f2f2 !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;}
</style>

Các bạn thay Popularpost1 thành id của widget muốn áp dụng thủ thuật Cách tạo Widget trượt theo blog có id bất kì cho blogspot

Chỉnh các thuộc tính trong .bs_sticking {background:#f2f2f2 !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;} theo ý bạn

Chúc các bạn thành công !