Tạo phân trang bằng nút Load More sử dụng Ajax javascript cho Blogspot

đã xuất bản
Hầu hết các trang tin tức, báo online bây giờ đa số đều không sử dụng phân trang, mà thay vào đó là họ dùng plug-in có tên là Ajax Load More. Đối với Blogspot thì chúng ta cũng có thể sử dụng được, nhờ vào 1 đoạn javascript nhỏ dưới đây. Tiện ích này rất hay, có thể load trước bài viết mà không cần phải tải lại trang hay phải qua trang mới. Giúp Blog thêm phần chuyên nghiệp.
Bài viết này mình sẽ hướng dẫn cách làm phân trang giống như bacsiwindows.com đang sử dụng.

Cách thực hiện

1. Khi click vào mới load bài viết

Thêm tất cả javascript bên dưới vào trước thẻ </body>
<script type='text/javascript'>//<![CDATA[
(function(a) {
    function h() {
        g || (g = !0, d ? (b.find("a").hide(), b.find("img").show(), a.ajax(d, {
            dataType: "html"
        }).done(function(c) {
            var c = a("<div></div>").append(c.replace(j, "")),
                e = c.find("a.blog-pager-older-link");
            e ? d = e.attr("href") : (d = "", b.hide());
            c = c.find(i).children();
            a(i).append(c);
            window._gaq && window._gaq.push(["_trackPageview", d]);
            window.gapi && window.gapi.plusone && window.gapi.plusone.go && window.gapi.plusone.go();
            window.disqus_shortname && a.getScript("https://" + window.disqus_shortname + ".disqus.com/blogger_index.js");
            window.FB && window.FB.XFBML && window.FB.XFBML.parse && window.FB.XFBML.parse();
            b.find("img").hide();
            b.find("a").show();
            g = !1
        })) : b.hide())
    }
    function k() {
        var a = Math.max(f.height(), l.height(), document.documentElement.clientHeight),
            b = f.scrollTop() + f.height();
        0 > a - b && h()
    }
    var d = "",
        b = null,
        i = "div.blog-posts",
        g = !1,
        f = a(window),
        l = a(document),
        j = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;
    a(document).ready(function() {
        if ("item" != _WidgetManager._GetAllData().blog.pageType && (d = a("a.blog-pager-older-link").attr("href"))) {
            var c =
                a('<a class="load-more-bsw" href="javascript:;" >tải thêm bài viết <i class="fa fa-arrow-right"/></a>');
            c.click(h);
            var e = a(
                '<img width="100%" src="#" style="display: none;">'
            );
            f.scroll(k);
            b = a('<div class="bsw-ajax-loadmore"></div>');
            b.append(c);
            b.append(e);
            b.insertBefore(a("#blog-pager"));
            a("#blog-pager").hide()
        }
    })
})(jQuery);
//]]></script>

2. Tự động load bài mới khi cuộn đến

<script type='text/javascript'>
//<![CDATA[
!function(i){function e(e){i.getScript("http://"+e+".disqus.com/blogger_index.js")}function t(){g||(g=!0,r?(w.find("a").hide(),w.find("img").show(),i.ajax(r,{dataType:"html"}).done(function(t){var n=i("<div></div>").append(t.replace(c,"")),o=n.find("a.blog-pager-older-link"),d=n.find(s).children();i(s).append(d),window._gaq&&window._gaq.push(["_trackPageview",r]),window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go(),window.disqus_shortname&&e(window.disqus_shortname),window.FB&&window.FB.XFBML&&window.FB.XFBML.parse&&window.FB.XFBML.parse(),window.twttr&&window.twttr.widgets&&window.twttr.widgets.load&&window.twttr.widgets.load(),o?r=o.attr("href"):(r="",w.hide()),w.find("img").hide(),w.find("a").show(),g=!1})):w.hide())}function n(){return Math.max(p.height(),l.height(),document.documentElement.clientHeight)}function o(){n()-(p.scrollTop()+p.height())<150&&t()}function d(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(r=i("a.blog-pager-older-link").attr("href"))){var e=i('<a href="javascript:;">Load more posts</a>');e.click(t);var n=i('<img src="'+a+'" style="display: none;">');p.scroll(o),(w=i('<div style="text-align: center; font-size: 150%;"></div>')).append(e),w.append(n),w.insertBefore(i("#blog-pager")),i("#blog-pager").hide()}}var a="https://1.bp.blogspot.com/-6_Eha7PSRy0/WXI6jskHE9I/AAAAAAAAMB0/6iFQ2qywS2kaNA2evWgsUb51zjRFf69cQCLcBGAs/s1600/loader.gif",r="",w=null,s="div.blog-posts",g=!1,p=i(window),l=i(document),c=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;i(document).ready(d)}(jQuery);
//]]>
</script>
Lưu ý template phải có thư viện jquery.
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'/>
// via helplogger

13 bình luận

Hãy cùng tham gia bình luận về bài viết này nhé!

  1. Trả lời
    1. Dạo này rảnh rồi nên viết nhiều lắm.

      Xóa
  2. Anh hướng dẫn cách chèn emoji vào comment đi anh =))

    Trả lờiXóa
  3. phải có thư viện jquery tức là chèn chỗ nào a

    Trả lờiXóa
    Trả lời
    1. Em xem đoạn thư viện js kia có chưa, nếu chưa có thì thêm vào sau <head> còn có rồi thì thôi.

      Xóa
    2. BSW ƠI , bài viết của e k hiện thumb , mấy bài đầu thì có hiện , nhưng mấy bài sau thì k hiện , a xem giúp e vs
      https://blogtamsubsf.blogspot.com/

      Xóa
Gợi ý cho bạn