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

Tác giả Lê Vạn Bảo Trọng

Xuất bản 27 thg 12, 2018

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp9NBcb81zbSHf8PSoYREWX1fjsI4hHPxxEGqeGvVc81v-kuElIG8sgTzY6jgMT8lvw3BQQMQV_nygmI5_nwsoMyF_eQOLR-k6IFN8f9-4-qFaSVpEeq9XW0VUclAxMYw1acP14Hy6YcYi/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