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

LongAnIT 9/14/2018
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.

No comments:

Post a Comment

Nếu phát hiện spam bạn sẽ bị xử lý. Bạn có thể đặt backlink tại đây Hướng dẫn đặt backlink nofollow tại đây