Cách tạo sticky widget cho blogspot

Bạn không muốn nội dung trên thanh side bar bị trôi khi người đọc cuộn xuống dưới, hay bạn muốn có một nội dung làm điểm nhấn, hay chỉ đơn giản muốn tạo sự khác biệt cho trang blog của mình...

Mình sẽ giới thiệu với các bạn cách làm một sticky widget để các bạn áp dụng vô trang blog của mình nhé.

Hiệu ứng này sẽ áp dựng được với widget bất kỳ mà các bạn muốn miễn sao xác định đươc ID của nó.

Cách xác đinh ID như thế nào rất đơn giản, mình sẽ tổng hợp rồi giới thiệu ở bài sau hoạc các bạn cũng có thể google nó cũng được.

1. Code để tạo sticky widget:
Các bạn chỉ việc copy đoạn code bên dưới rồi chèn trước thẻ đóng </body> là được

<!-- sticky widget -->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>

<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(){

    $(&quot;#HTML5&quot;).sticky({topSpacing:0,bottomSpacing:500,});

   });

 </script>

2. Tùy chỉnh:
.Bạn chỉ việc thay ID widget của bạn vào dòng ID mà đỏ ở trên thôi là được
.Nếu các bạn muốn đính nhiều hơn một widget thì chỉ việc copy thêm một dòng :

$("#HTML5").sticky({topSpacing:0,bottomSpacing:500,});

Rồi tiếp tục thay thế ID của widget thứ 2 nữa

3. Lưu ý:

Trong nhiều trường hợp cái sticky widget có thể gây khó chịu cho người xem  khi trải nghiêm trên phiên bản mobile thì phải làm thế nào?


Các bạn phải sử dụng thêm một dòng lệnh như bên dưới nữa, trong đó bạn thay đoạn code vừa rồi vào dòng tô màu đỏ bên dưới nhé

<b:if cond='data:blog.isMobile == &quot;false&quot;'>
//Contents inside this, will only appear in Desktop version.
</b:if>

Đối với một số theme responsibility không sử dụng phiên bản mobile thì các bạn phải sử dụng dòng code bên dưới mới được.

b:if cond='data:blog.isMobileRequest == "false"'>
<!-- display 'something' if browser not requesting as a mobile device-->
<p>Something!</p>
</b:if>

4. Lưu lại và kiểm tra:

Xong rồi các bạn lưu lại và kiểm tra thành quả mà mình vừa mới làm được nhé

Chúc các bạn làm được cái sticky widget ưng ý. Nếu có thắc mắc gì thì để lại comment bên dưới mình sẽ giải đáp cho các bạn.