10/24/13

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

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.
Phân trang xem thêm "Load More Posts" cho Blogspot
Phân trang xem thêm "Load More Posts" cho 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
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:;" >Xem thêm...còn nhiều lắ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>

- 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ả !

0 nhận xét:

Post a Comment