Với thủ thuật này khi thay vì sử dụng một tiện ích phân trang có các Button số để bấm thì nó sẽ hiển thị khi bạn bấm vào nút tải thêm bài viết. Điểm đặc biệt của phân trang này là nó sử dụng Ajax Jquery cho nên bài viết của bạn sẽ được tải thêm khi bấm vào nút tải thêm mà không cần phải tải lại trang web. Điểm đặc biệt khi áp dụng tiện ích này không hề phát sinh lỗi HTML 5 nên bạn có thể yên tâm áp dụng nó.

Phân trang tự động tải thêm bài viết cho blogger với Ajax Jquery

Các bạn có thể xem demo theo link bên dưới:

» XEM DEMO

» Thêm tiện ích Nút like với hiệu ứng ẩn hiện sau lá cờ trên sidebar cho blogspot

Để thêm nó vào blog bạn chỉ cần làm theo một số bước đơn giản sau:

1. Đăng nhập vào blog.
2. Chọn thẻ Bố cục (Layout).
3. Thêm đoạn code bên dưới vào trước thẻ đóng ]]></b:skin> trong mẫu của bạn.
.button {text-align: center;border: 1px solid #055;box-shadow: 0 1px rgba(255,255,255,.2) inset;background: #066;color: #fff!important;text-decoration: none!important;cursor: pointer;padding: 5px 10px;}
.button a{color: #fff!important;font-weight:bold;}
.button.medium {padding: 5px 10px;font-size: 15px;}
.button:hover {border: 1px solid #222;background: #2c2a28;}
4. Dán đoạn code bên dưới vào trước thẻ đóng </body>
(Bạn cũng có thể thêm bằng cách Chọn Thêm tiện ích => Tạo một tiện ích HTML/Javascripts ngay bên dưới phần bài đăng của bạn và dán đoạn code bên dưới vào).

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script type='text/javascript'>
(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("http://"+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 href="javascript:;" >Tải thêm bài viết</a>');c.click(h);var e=a('<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6cNL0eRJTb4yN18-gd_pwClLwWir5lg0qEBryGX-J1CWjUAoimzVzPh1UKIRYlKo1xXgsLYBJ9SJ53HDUFfthRY7kH7Vz6viy3KeYy53TTohBxWrBL85v7eqpZdFcaxmFahlOoesfuzU/s1600/fb-style-loader-namkna.gif" style="display: none;">');f.scroll(k);b=a('<div class="button medium"></div>');b.append(c);b.append(e);b.insertBefore(a("#blog-pager"));a("#blog-pager").hide()}})})(jQuery);
</script>

» Tùy chỉnh code:
  • Xóa đoạn code màu xanh nếu trong blog của bạn đã có thư viện Jquery. (Lưu ý giữ lại nếu nó là phiên bản vao hơn nha).
  • Sửa lại đoạn mình tô màu đỏ cho phù hợp với trang web của bạn nha.
  • Link ảnh màu tím chính là link ảnh loadding hiển thị khi bạn bấm vào tải thêm bài viết. Bạn có thể sửa thành link ảnh khác nếu muốn.
5. Lưu mẫu lại và quay trở lại trang blog của bạn để xem kết quả bạn đã thực hiện nha.

Hãy để lại comment bên dưới nếu bạn gặp bất kỳ khó khăn nào khi áp dụng thủ thuật này vào trang blog của bạn nha. Đừng quyên chia sẻ nếu bài viết có ích để nhiều người cùng biết đến nó nha.