Sticky Widget - Neo nhiều Widget cố định trong Blogspot

Thông thường khi bạn xem một bài viết trên blog và kéo xuống dưới thì những widget ở trên sẽ bị ẩn dần đi. Tuy nhiên bạn cũng có thể giữ cố định một hay nhiều widget khi người đọc kéo xuống dưới để tăng sự tương tác với blog. Việc này có thể mang đến cho bạn một số lợi ích như:

1. Cố định widget Bài đăng phổ biến để tăng lượt view và thời gian xem blog. Điều này tốt cho SEO.
2. Cố định widget Like fanpage hoặc Subscribe by email để tăng lượt theo dõi blog qua email hoặc các mạng xã hội.
3. Một chú ý là bạn không nên đặt quảng cáo của Google Adsense hoặc quảng cáo nào khác cố định trên blog, bạn có thể bị các trang quảng cáo phạt vì việc này.

OK. Giờ chúng ta bắt tay vào làm thôi, để thực hiện điều này bạn chỉ cần thêm đoạn code sau vào trước thẻ </body> là được. <script>
// Tutorial at http://blogduykhanh.blogspot.com/2015/09/sticky-widget-neo-widget-co-dinh-blogpot.html
//<![CDATA[
BDK_makeSticky("WIDGET_ID"); // enter your widget ID here
function BDK_makeSticky(elem) {
    var BDK_sticky = document.getElementById(elem);
    var scrollee = document.createElement("div");
    BDK_sticky.parentNode.insertBefore(scrollee, BDK_sticky);
    var width = BDK_sticky.offsetWidth;
    var iniClass = BDK_sticky.className + ' BDK_sticky';
    window.addEventListener('scroll', BDK_sticking, false);
    function BDK_sticking() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            BDK_sticky.className = iniClass + ' BDK_sticking';
            BDK_sticky.style.width = width + "px";
        } else {
            BDK_sticky.className = iniClass;
        }
    }
}
//]]>
</script>
<style>
.BDK_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> Để biết được WIDET ID bạn vào Bố cục nhấp vào chỉnh sửa Widget muốn lấy ID. Khi Popup hiện lên bạn sẽ thấy ở cuối thanh địa chỉ URL có dạng như sau widgetId = và đến ID Widget.

Bạn copy ID này thay thế WIDGET_ID trong đoạn code trên là được. Chúc bạn thành công!
Nếu thấy bài viết này có ích hãy chia sẻ nó cho nhiều người khác, để lại bình luận nếu bạn gặp khó khăn trong quá trình cài đặt. Rất vui được giúp đỡ. ^^

Tác giả: Khánh

Một Blogger nghiệp dư thích tìm hiểu về blogspot và các thủ thuật blog. Hy vọng từ cái nhìn của một người không chuyên có thể giúp bạn dễ dàng hơn trong con đường xây dựng Blog.

KHI TA CHIA SẺ - HẠNH PHÚC ĐƯỢC NHÂN LÊN

CÓ THỂ BẠN MUỐN XEM