Phân trang tải thêm Load More Posts cho Blogger

June 8, 2013
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.
Phân trang tải thêm "Load More Posts" cho Blogger
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/
Đã có 8 lời bình luận cho chủ đề Phân trang tải thêm Load More Posts cho Blogger. Trang web dophuquy.com rất hoan nghênh đón nhận những lời bình luận mang tính xây dựng từ độc giả.
  1. Unknown cai nay thi trong khoang bao nhieu ky tu thi chuyen sang sau vay admin
  2. Voi Con @Quangel: Phụ thuộc số bài viết bạn cài đặt hiển thị trên trang chủ trong Blogger bạn nhé. Ví dụ bạn chọn hiển thị 10 bài viết thì mặc định trên trang chủ (cũng như khi bấm xem theo Labels) sẽ chỉ hiển thị duy nhất 10 bài viết, bạn bấm tải thêm thì sẽ tiếp tục tải thêm 10 kế tiếp cho đến hết.
  3. Unknown Có cái auto load không?
    Mình thử rất nhiều bài hướng dẫn rồi mà chẳng chịu auto cho mình gì cả :D
  4. Chung cư Hà Nội hình như không được bạn à.
  5. Phạm Hữu Dư Đã test và chạy rất ngon :D Nhưng nếu có auto load khi kéo chuột xuống thì quá đã ^^
  6. Anonymous cám ơn bài viết của bạn
  7. Shimi thank - mình copy về blog mình nhé
  8. Unknown hay, mong blog của bạn có thêm nhiều bài viết bổ ích :)

 
Di chuyển lên trên cùng



Bình luận bài viết