Phân trang xem thêm ''Load More Post'' cho Blog

Một số bạn có email yêu cầu về thủ thuật thêm phân trang dạng "Xem thêm....còn nhiều lắm" như Blog hình ảnh đẹp hoặc "Load More Posts" của blog Wallpapers HD
Với thủ thuật này nó thay cho phân trang dạng 1|2|3|...ở trang chủ và trang Label của blogspot.

Demo: Hình ảnh đẹp Blog
Cách làm thủ thuật này như sau
1. Vào bảng điều khiển Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascrip
Lưu ý, cho tiện ích ngay dưới tiện ích POSTS nhé

Phân trang xem thêm "Load More Posts" cho Blogspot

2. Dán code dưới đây vào tiện ích vừa thêm

<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:;" >Mệt Chưa..Muốn Xem Nữa Không..Click vào đây</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>
- Chữ bôi vàng bạn thay đổi theo câu của bạn nhé
Lưu lại và xem kết quả !

Xem nhiều thủ thuật hơn tại Lãng Tử Studio


Đừng quên Like và Share nếu thấy bài viết bổ ích