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/AVvXsEhQIaQ8fXjAdrHo21-4jwFpklCk6DbofGadpKvoGuCMogS6Mpu40OiY4byrOkeCuGSV2wXSKZiXgXMmR6myRjO8QfnXgIedDL2_3voDsmy1iU0HyZuEFY7VGGjVs0kLqHkamPRUwRoipF-0/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
Không có nhận xét nào