Tạo widget trượt dọc trên blogspot (Sticky widget)

Sticky widget trên blogspot là widget mà khi chúng ta kéo xuống thì nó vẫn nằm vị trí đó, không chạy lên trên theo trang web, mục đích là muốn cho người sử dụng chú ý đến và có thể truy cập nhanh nội dung trên widget để người truy cập có thể tương tác tốt hơn với blog của chúng ta, đó có thể là một mẫu quảng cáo, một facebook like box, hay đơn giản là một thanh menu giống như trang bloggerviet.tk, thật tiện lợi phải không nào. Ở bài viết này mình xin hướng dẫn các bạn tạo một widget trượt dọc trên blogspot nhanh và đơn giản, đảm bảo làm thành công 100%. Bạn có thể xem demo bằng chính blog này nhé, là widget tags của mình.

Bạn chỉ cần copy và paste đoạn code sau lên trước thẻ </body> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
/*<![CDATA[*/
(function($) {
    var defaults = {
            topSpacing: 0,
            bottomSpacing: 0,
            className: 'is-sticky',
            center: false
        },
        $window = $(window),
        $document = $(document),
        sticked = [],
        windowHeight = $window.height(),
        scroller = function() {
            var scrollTop = $window.scrollTop(),
                documentHeight = $document.height(),
                dwh = documentHeight - windowHeight,
                extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
            for (var i = 0; i < sticked.length; i++) {
                var s = sticked[i],
                    elementTop = s.stickyWrapper.offset().top,
                    etse = elementTop - s.topSpacing - extra;
                if (scrollTop <= etse) {
                    if (s.currentTop !== null) {
                        s.stickyElement.css('position', '').css('top', '').removeClass(s.className);
                        s.currentTop = null;
                    }
                }
                else {
                    var newTop = documentHeight - s.elementHeight - s.topSpacing - s.bottomSpacing - scrollTop - extra;
                    if (newTop < 0) {
                        newTop = newTop + s.topSpacing;
                    } else {
                        newTop = s.topSpacing;
                    }
                    if (s.currentTop != newTop) {
                        s.stickyElement.css('position', 'fixed').css('top', newTop).addClass(s.className);
                        s.currentTop = newTop;
                    }
                }
            }
        },
        resizer = function() {
            windowHeight = $window.height();
        };
    // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
    if (window.addEventListener) {
        window.addEventListener('scroll', scroller, false);
        window.addEventListener('resize', resizer, false);
    } else if (window.attachEvent) {
        window.attachEvent('onscroll', scroller);
        window.attachEvent('onresize', resizer);
    }
    $.fn.sticky = function(options) {
        var o = $.extend(defaults, options);
        return this.each(function() {
            var stickyElement = $(this);
            if (o.center)
                var centerElement = "margin-left:auto;margin-right:auto;";
            stickyId = stickyElement.attr('id');
            stickyElement
                .wrapAll('<div id="' + stickyId + 'StickyWrapper" style="' + centerElement + '"></div>')
                .css('width', stickyElement.width());
            var elementHeight = stickyElement.outerHeight(),
                stickyWrapper = stickyElement.parent();
            stickyWrapper
                .css('width', stickyElement.outerWidth())
                .css('height', elementHeight)
                .css('clear', stickyElement.css('clear'));
            sticked.push({
                topSpacing: o.topSpacing,
                bottomSpacing: o.bottomSpacing,
                stickyElement: stickyElement,
                currentTop: null,
                stickyWrapper: stickyWrapper,
                elementHeight: elementHeight,
                className: o.className
            });
        });
    };
})(jQuery);
/*]]>*/
</script>
<script type='text/javascript'>
   $(document).ready(function(){
    $("#Label1").sticky({topSpacing:0});
   });
 </script>

Nếu trong template của bạn có dòng đỏ rồi thì chỉ cần copy paste phần còn lại
Sau đó các bạn thay thế Label1 (màu xanh) thành ID Widget của bạn (HTML1, PopularPosts1...)

Nếu các bạn chưa xác định được Widget muốn sử dụng có ID là gì thì mình xin hướng dẫn luôn:
Các bạn vào Layout > Edit (Widget cần tạo sticky)

Trong cửa sổ Edit Wiget bạn bôi đến hết phần URL sẽ thấy được Widget ID, ở ví dụ của mình là HTML1

OK, vậy là chúng ta có thể tạo ra một widget trượt dọc theo blogspot tiện lợi là nhanh chóng, chúc các bạn thành công !