Cách Cố định Widget khi cuộn trang trong blogger

Floating Sidebar  Widget

Sticky Widget cố định cho Blogger có nghĩa là widget sẽ chạy theo màn hình khi cuộn trang lên xuống.

Với cách cố định Widget này sẽ giúp người truy cập nhanh vào các menu, hoặc bạn cần làm nổi bật một nội dung widget nào đó. Đặc biệt nó rất hay được dùng cho các trang cần cố định banner quảng cáo.

Để thực hiện Code cố định Widget (Sticky widget) khi cuộn trang cho Blogger các bạn chỉ việc copy toàn bộ đoạn code phía dưới đây và chèn vào trước thẻ </body> trong template.

<style> .GICO_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:relative9 !important;}
</style>
<script>
//<![CDATA[
StickyWidget("ID Widget"); // enter your widget ID here
function StickyWidget(elem) {
    var GCVN_sticky = document.getElementById(elem);
    var scrollee = document.createElement("div");
    GCVN_sticky.parentNode.insertBefore(scrollee, GCVN_sticky);
    var width = GCVN_sticky.offsetWidth;
    var iniClass = GCVN_sticky.className + ' GCVN_sticky';
    window.addEventListener('scroll', GICO_sticking, false);
    function GICO_sticking() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            GCVN_sticky.className = iniClass + ' GICO_sticking';
            GCVN_sticky.style.width = width + "px";
        } else {
            GCVN_sticky.className = iniClass;
        }
    }
}
//]]>
</script>
 Chú ý: Bạn thay ID Widget thành ID Widget mà bạn muốn cố định.

Nhận xét

Được xem nhiều nhất

Uconvert miễn phí cho Office 2003, 2007, 2010, 2013

Download OneKey Ghost v14.5.8.215 GPT (UEFI)

Sửa lỗi con trỏ chuột bị quay vòng vòng Windows 7/8

Lấy lại Windows Photo Viewer trên Windows 10 giúp xem ảnh nhanh hơn

Hướng dẫn mở PORT Modem GPON H646EW Viettel

Hướng dẫn triển khai AMP trên Blogspot

Chia sẻ template blogspot longanit đang sử dụng