Hôm nay mình xin chia sẽ các bạn chức năng phân trang dạng bấm vào để tải thêm (Load more posts) cho Blogger (Blogspot).

Xem trước tại Hình Ảnh Vui

Chức năng này chỉ hoạt động tốt đối với những Blog sử dụng chức năng Read more sẵn có của Blogger (dùng dấu ngắt), hoặc Trích dẫn Blogger không sử dụng JS.
Cách thực hiện:
Vào phần Bố cục và thêm mới 1 tiện ích HTML/Javascript nằm ở vị trí ngay dưới Bài đăng trên Blog.

Bạn copy đoạn mã dưới đây vào phần nội dung tiện ích này, sau đó bấm lưu lại là hoàn thành.

<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:;" >BẤM VÀO ĐÂY ĐỂ TẢI THÊM</a>');c.click(h);var e=a('<img src="https://raw.github.com/techirsh/infinite-scroll-css-styles/master/images/fb-style-loader.gif" style="display: none;">');f.scroll(k);b=a('<div class="techirshloader"></div>');b.append(c);b.append(e);b.insertBefore(a("#blog-pager"));a("#blog-pager").hide()}})})(jQuery);
</script>
<style>
.techirshloader a{text-decoration:none;display:block;width:100%;color:#3772AB;}
.techirshloader{font-family:arial, helvetica, sans-serif; padding: 8px 8px 8px 8px; font-weight:bold; text-align: center; color: #3772AB; font-size: 24px;}
.techirshloader a:hover{color: #000000;}
</style>

Nguồn code: http://www.techirsh.com/

Phân trang tải thêm Load More Posts cho Blogger được đăng bởi Đỗ Phú Quý, vào lúc 2013-06-08T09:09:00+07:00