Làm cho widget trượt theo màn hình cho Blogger

Hiện tại có rất nhiều cách để làm cho website của chúng ta nhìn ngầu và chuyên nghiệp hơn trong mắt người dùng. Nhiều người thì trang trí cho blog mình có một vẻ ngoài bắt mắt, người thì thêm những hiệu ứng bá đạo khác lạ gây hứng thú cho người dùng. Những việc làm tưởng chừng nho nhỏ này có tác động không hề nhỏ đến thiện cảm của người dùng đối với website của chúng ta, và nếu bạn bỏ lỡ qua điều này thì đang khiến bạn bỏ lỡ cơ hội để tạo dựng lượng khách cố định mà mọi blogger đều mong muốn.

Làm cho widget trượt theo màn hình cho Blogger

Cũng cùng lý do này, lẩn quẩn tìm quanh trên mạng mình tìm thấy đoạn jQuery giúp cho một thứ bất kì trượt theo khung màn hình, và mình quyết định viết bài hướng dẫn xài nó với Blogger cho mọi người.

Làm cho widget trượt theo khung màn hình cho Blogger

Đăng nhập vào trang tổng quan của blog mà bạn muốn thêm vào hiệu ứng

Tại trang tổng quan » Mẫu » Chỉnh sửa HTML

Ở đây bạn tìm đến thể </body> và chèn đoạn mã này lên trên
<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(){
    $("#HTML5").sticky({topSpacing:0});
   });
 </script>
việc đơn giản của đoạn jQuery  này là sẽ làm cho những phần tử mà bạn mong muốn ở trên trang trượt theo khi màn hình qua khu vực của nó. Ở đây bạn thay thế HTML5 bằng id mà widget bạn muốn nó trượt theo khung màn hình, và topSpacing bằng khoảng cách giữ widget đó với cạnh trên của màn hình rồi lưu lại.

Lời kết

Ngoài việc tăng thiên cảm với người đùng thì đây là một trong những jQuery rất hay nếu bạn có những bài viết chất lượng, với widget chạy dọc thân trang bạn có thể treo những thứ bạn muốn khách chú ý đến như quảng cáo, liên hệ, v.v.. từ đó thì tăng doanh thu hoặc như lợi ích nào đó cho bản thân của bạn.

33 bình luận

  1. avatar Nặc danh says

    lúc 16:52 11 tháng 7, 2014

    Thank bạn nhiều nha !
    Nhưng Widget của mình không dừng lại đúng vị trí như của bạn vậy nhỉ.
    (của bạn dùng lại trên chữ " Nhãn ', còn của mình chạy xuống dưới luôn bạn ơi )

  2. avatar says

    lúc 17:26 11 tháng 7, 2014

    Haha thiếu xót trong bài viết rồi, cám ơn bạn nhé, ở đoạn code này
    $("#HTML5").sticky({topSpacing:0});
    bạn thêm
    bottomSpacing vào để tính giới hạn khoảng cách với chân trang nhé
    $("#HTML5").sticky({topSpacing:0,bottomSpacing:500});

  3. avatar says

    lúc 18:15 15 tháng 7, 2014

    bạn ơi nếu mình muốn nó chỉ trượt tới khung comment thì dừng trượt thì điều chỉnh sao vậy bạn,mình thử điều chỉnh bottomSpacing: 30, mà nó vẫn không dừng lại.giúp mình với.

  4. avatar says

    lúc 18:16 15 tháng 7, 2014

    giống như của bạn ý,nó chỉ chạy đến phần comment thì dừng mà không chạy đến phần footer.

  5. avatar says

    lúc 18:19 15 tháng 7, 2014

    à mình làm được rồi.

  6. avatar says

    lúc 13:59 14 tháng 8, 2014

    cho em xin cai code "co the ban thich" nhu anh dc ko a

  7. avatar says

    lúc 14:11 14 tháng 8, 2014

    Cái này là bài viết liên quan bình thường thôi bạn, bạn có thể xem qua cái này, mình đã chỉnh giao diện tương tự cái của mình, còn đặt chuẩn HTML5 nửa :)

    http://www.kslzone.net/2014/08/bai-viet-lien-quan-co-hinh-anh-chuan-html5.html

  8. avatar says

    lúc 21:36 16 tháng 9, 2014

    xung đột jquery bạn ơi, mình thêm jquery vào thì nó xung đột với cái menu làm cho nó không xổ xuống đc, còn không thêm jquery vào thì nó không hoạt động bạn à :v

  9. avatar says

    lúc 21:39 16 tháng 9, 2014

    Vấn để xung đột trong jQuery là vấn đề rất thường gặp, cách khắc phục thì mình chịu thôi, để ngâm ra 2 đống code đấy với nhau, các biến hoặc các hàm nào có tác động đến nhau thì không đơn giản :D

  10. avatar says

    lúc 22:13 12 tháng 11, 2014

    thanh menu bị ẩn dưới các bài viết thì làm cách nào z bạn? mình trượt xuống thì được nhưng nó bị ẩn bởi các menu bài viết của mình bên dưới

  11. avatar says

    lúc 22:23 12 tháng 11, 2014

    Cái này thì liên quan đến z-index, bạn có thể tham khảo tại Google hoặc để lại địa chỉ blog ở đây mình xem qua cho bạn nhé.

  12. avatar says

    lúc 23:06 13 tháng 11, 2014

    mình tập tành làm thử, http://maublogbdt1.blogspot.com/ đây là trang mẫu của mình bạn xem thế nào? thk ad!

  13. avatar says

    lúc 08:24 14 tháng 11, 2014

    Ok, thấy menu bạn vẫn còn ẩn ở dưới, bạn chèn đoạn này lên trên b:skin nhé
    #nav {
    z-index: 1;
    }

  14. avatar says

    lúc 05:28 2 tháng 12, 2014

    Chỉ chạy được cho widget thôi hả bạn nếu mình muốn đoạn mã này chạy xuống thì làm thế nào

    < d i v class='f b-like' data-layout='standard' data-a ction=' like' d ata-show-f aces='f alse' da ta-sh are='tru e '>

  15. avatar says

    lúc 18:36 2 tháng 12, 2014

    Bạn đưa mình địa chỉ web và demo chi tiết cái mà bạn muốn cho nó chạy nhé.

  16. avatar says

    lúc 21:32 3 tháng 12, 2014

    đây nè bạn http://lucnganit.blogspot.com/2014/11/song-sot-sau-4-nam-bi-nhot-trong-buc.html ở trên phần chỗ "thích bài này" đó mình muốn nó chạy như trang xem123.net và phần nền màu hồng đó nữa

  17. avatar says

    lúc 20:01 4 tháng 12, 2014

    Bác thử thay #HTML5 bằng .meta xem thử rồi báo lại nhé

  18. avatar says

    lúc 20:06 6 tháng 12, 2014

    ok bạn ạ,nhưng mà nó chạy cả phần ngày tháng của bài viết xuống. làm sao để thêm màu như của xem123.net vậy bạn

  19. avatar says

    lúc 20:35 6 tháng 12, 2014

    Cái đó thì đơn giản bản tách code ra là được mà, bây giờ bạn dán đoạn
    <div style='width: 642px;' class='meta'>
    ....
    </div>
    vào đây cho mình chỉnh rồi hướng dẫn tiếp cho bạn.

  20. avatar says

    lúc 21:01 6 tháng 12, 2014

    dán vào đâu hả bạn sao mình làm không được bạn làm được đoạn code like có màu nền và có bài trước bài sau như xem123 không

  21. avatar says

    lúc 16:34 7 tháng 12, 2014

    Thôi bây giờ bạn mời mình vào admin blog đó, mình làm cho dễ chứ hướng dẫn nữa, cái khung comment nó hơi bị loãng rainbow.lam25@gmail.com

  22. avatar says

    lúc 17:10 7 tháng 12, 2014

    Thưa anh! Cho em hỏi id widget nằm ở đâu ạ, em cảm ơn anh.

  23. avatar Nặc danh says

    lúc 18:08 7 tháng 12, 2014

    Bạn nhấn trên chỉnh sửa Widget trong bố cục rồi xem trên thanh địa chỉ đó bạn ^^

  24. avatar Nặc danh says

    lúc 20:00 7 tháng 12, 2014

    Thật sự em mà thấy trang Web có nội dung không lành mạnh thì em sẽ không dám truy cập trang đó. Không đủ can đảm để hướng dẫn tiện ích anh ạ :D

  25. avatar says

    lúc 20:59 7 tháng 12, 2014

    Anh qua bên này trả lời comment của em đi ạ! http://www.dongvietblog.com/2014/09/tao-recent-posts-voi-style-tin-tuc-dep-cho-blogspot.html

  26. avatar says

    lúc 13:10 8 tháng 12, 2014

    ok, bạn giúp mình tạo phần like, cmt, và bài viết liên quan giống trang đó nhé,nói chung phần bài viết càng giống càng tốt.

  27. avatar says

    lúc 15:05 5 tháng 1, 2015

    Cái này chỉ tạo được một sticky widget thôi. Liệu mình có thể tạo nhiều sticky widget được không nhỉ? Thank bạn nhé...

  28. avatar says

    lúc 19:06 5 tháng 1, 2015

    Đơn giản bạn chỉ cần nhân đôi đoạn code trong javascript cuối cùng thôi, ví dụ nhé
    $(document).ready(function(){
    $("#HTML5").sticky({topSpacing:0});
    $("#HTML6").sticky({topSpacing:0});
    $("#nav-bar").sticky({topSpacing:0});
    });

  29. avatar says

    lúc 18:31 10 tháng 10, 2015

    cảm ơn

    http://xempfaucet.blogspot.com

  30. avatar says

    lúc 22:23 30 tháng 12, 2015

    mình dùng cái của cậu thị bị xung đột nên mình thử code khác thì ok nhưng mình không biết cách cho nó dừng ở điểm nào đó nó cứ tuột xuống hết trang
    xin lỗi ko liên quan tới bài cậu nhưng cậu có thể xem và giúp mình thử code này với
    <style type="text/css">
    .stickywidget{background:none!important;position:fixed!important;top:25px;z-index:99;-webkit-transform:translateZ(0);}
    #PopularPosts2 .widget-content {padding:0;margin:auto;}</style>
    <script type='text/javascript'>
    //<![CDATA[
    // Sticky Widget
    function makemeSticky(e){function t(){var e=s.getBoundingClientRect();e.top<0?(n.className=a+" stickywidget",n.style.width=i+"px"):n.className=a}var n=document.getElementById(e),s=document.createElement("div");n.parentNode.insertBefore(s,n);var i=n.offsetWidth,a=n.className+" makesticky";window.addEventListener("scroll",t,!1)}makemeSticky("PopularPosts2");
    //]]>
    </script>

  31. avatar says

    lúc 08:13 5 tháng 1, 2016

    Đoạn mã này thì bó tay bạn ơi, mình không hiểu rõ mã trên để mà customize lại cho bạn được nữa.

  32. avatar says

    lúc 14:31 5 tháng 1, 2016

    Vì không thể bình luận bằng html nên bạn sang trang vai69.com của mình copy ở đoạn thích bài này có đoạn mã giống mã của bạn đó

  33. avatar says

    lúc 09:39 29 tháng 3, 2016

    Làm sao để nó đè lên những phần khác khi trượt.mà không phải những bị cái khác đè lên vậy

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.