[Blogger] Phân trang tải thêm bài viết bằng Ajax cho blogspot

Chắc hẳn bạn đã quá quen thuộc với dạng phân trang trước sau dạng 2 mũi tên hoặc phân trang có đánh số của blogger rồi đúng không. Mỗi cái đều có cái hay riêng của nó, và trong bài viết này tôi sẽ giới thiệu cho các bạn 1 dạng phân trang nữa dùng ajax để tải thêm bài viết

Lợi thế phân trang dạng này đó là trang của bạn sẽ không phải tải lại nữa, chỉ cần nhấn vào nút "Tải thêm" thì các bài viết sẽ được tải ngay bên dưới, điều này rất phù hợp cho các trang ít bài viết như trang search label, trang tìm kiếm từ khóa search query hoặc trang lưu trữ bài viết.

Tuy nhiên bạn cũng không nên quá lạm dụng nó, ví dụ trang hompage blog của bạn có tới vài nghìn bài viết mà cứ bắt người dùng load mãi load mãi để tìm bài viết cuối cùng thì điều đó thật sự rất không hợp lý, lúc đó bạn sẽ phải cân nhắc dùng phân trang dạng số sẽ hợp lý hơn

Demo

Trong bài này tôi sử dụng thẻ điều kiện blogger 2018 và phân trang ajax chỉ sử dụng cho trang lưu trữ, trang search label và trang tìm kiếm từ khóa query, các trang còn lại sẽ sử dụng phân trang đánh số code sẽ như sau (chèn trước thẻ đóng </body>)

<b:if cond='!data:view.isSingleItem and !data:view.isArchive and !data:view.isLabelSearch'>
<b:if cond='data:blog.searchQuery == &quot;&quot;'>
<!-- Code phân trang có đánh số -->
</b:if></b:if>

<b:if cond='data:view.isArchive or data:blog.searchLabel or data:view.isSearch'>
<!-- Ajax Load More -->
<style type='text/css'>
.load-more{text-align:center;margin:20px 0}
.load-more a{font-weight:500;display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px;color:#fff;background-color:#337ab7;border-color:#2e6da4}
</style>
<script type='text/javascript'>
//<![CDATA[
var loadingGif = 'https://i.imgur.com/5Tw7i96.gif';
var text='TẢI THÊM';
!function(a){function b(){h||(h=!0,d?(f.find("a").hide(),f.find("img").show(),a.ajax(d,{dataType:"html"}).done(function(b){var b=a("<div></div>").append(b.replace(k,"")),c=b.find("a.blog-pager-older-link");c?d=c.attr("href"):(d="",f.hide()),b=b.find(g).children(),a(g).append(b),f.find("img").hide(),f.find("a").show(),h=!1})):f.hide())}function c(){var a=Math.max(i.height(),j.height(),document.documentElement.clientHeight),c=i.scrollTop()+i.height();0>a-c&&b()}var d="",f=null,g="div.blog-posts",h=!1,i=a(window),j=a(document),k=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;a(document).ready(function(){if(d=a("a.blog-pager-older-link").attr("href")){var g=a('<a href="javascript:void(0)">'+text+'&nbsp;&nbsp;<i class="fa fa-arrow-circle-down"></i></a>');g.click(b),i.scroll(c),f=a('<div class="load-more"></div>');var img=$('<img src="'+loadingGif+'" style="display: none;">');f.append(g),f.append(img),f.insertBefore(a("#blog-pager")),a("#blog-pager").hide()}})}(jQuery);
//]]></script>
</b:if>

Bạn có thể tùy chỉnh ảnh loading cũng như text của button load more cho hợp với ý của mình

Lưu mẫu lại và kiểm tra thành quả

Good Luck !