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

Sửa lỗi không move or copy được sheet của Excel

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

Download OneKey Ghost v14.5.8.215 GPT (UEFI)

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