
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'>Lưu ý template phải có thư viện jquery.
//<![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/AVvXsEiabIfxxq9OFr5dn2RUhpDXG3gJ1T3kQ9JDtth-kX5slFmX1EWihizQQLRAFLfkC1YRaRbqpI6ZgHVATCnHu0d7dAOb5LfH7pxYDQzaePonSYIkOewWVYUOKOLftxZUjV6oKSoVySkqFQFY/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>
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'/>
// via helplogger
LABEL :
#Thủ Thuật Blogspot
Related Post
- Chào các bạn, chào mừng các bạn quay trở lại với blog Bác Sĩ Windows - bacsiwindows.com/b
- Đây là bài viết hướng dẫn Tạo một Template mới trắng tinh như Ngọc Trinh cho Blogspo
- Tạo hiệu chứ chữ cuộn lên xuống đẹp và đơn giản bằng CSS3 - Hiệu ứng cuộn chữ đẹp và đơn
- Việc đặt quảng cáo chắc không còn xa lạ gì với những người làm web hay blogger, một phần
- Hiệu ứng lazyload - load ảnh tuần tự và mượt mà bằng js cho Blogspot - hiệu ứng load ảnh
- Tạo Button Download với CSS hover tuyệt đẹp cho BlogspotPremium ThemeChèn CSS trước ]]>