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

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
Nhớ bấm "Thông báo cho tôi" bên trên để nhận thông báo qua Email khi Admin trả lời nhé.
  • Đây là khu vực quản trị, bạn không có quyền truy cập vào!
    1. Anh hướng dẫn cách chèn emoji vào comment đi anh =))

      Trả lờiXóa
    2. 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
    3. sao em thêm nào nó không hoạt động. Link đây anh: www.quocbaoblog.xyz

      Trả lờiXóa
      Trả lời
      1. Do em xóa js mặc định của Blog nên không hoạt động đó.

        Xóa
      2. Tìm mấy bài hướng dẫn xóa js và css mặc định, rồi làm ngược lại là được.

        Xóa
    4. Ad cho e hỏi là cái tự động load trang khi cuộn đến là gắn ở đâu!?

      Trả lờiXóa
      Trả lời
      1. Trên bài viết có ghi đó bạn.

        Xóa
      2. e "2. Tự động load bài mới khi cuộn đến" có đoạn code thôi chứ em không biết chèn ở đâu

        Xóa
      3. Chèn như đoạn 1 thôi chứ đâu em.

        Xóa
    5. chia sẻ cái bài viết cùng chuyên mục đi bsw :v

      Trả lờiXóa
    6. Nhận xét này đã bị quản trị viên blog xóa.

      Trả lờiXóa
    7. bsw trở lại r ư :v hóng ra nhiều bài thủ thuật hơn nữa :V

      Trả lờiXóa
      Trả lời
      1. Mình chỉ trở lại làm dịch vụkinh doanh template thôi :D
        Bài mới sẽ do CTV viết mình không viết nữa.

        Xóa
    CÓ THỂ BẠN ĐANG TÌM