Phân trang kiểu ajax "auto load cho blogspot"

{tocify} $title = {Mục lục bài viết}

[tintuc]Hôm nay cuahangtemplate xin giới thiêu với các bạn thủ thuật mới
1 vài theme có cách thể hiện khá hay  khi click vào nó sẽ load thêm nội dung ngay trên trang chủ - trông khá giống kiểu load ajax trong php , đây là kiểu phân trang load more posts cho mẫu blogger chỉ cần dùng mã script - khá hay

auto load cho blogspot

** 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  .cách làm

1-vào template  -> layout thêm html/javascript ngay dưới blog post .

 2- chèn nội dung  sau vào widget

<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  http://www.dophuquy.com/2013/06/phan-trang-tai-them-load-more-posts-cho.html
và Nguồn code: http://www.techirsh.com/
bonus thêm 1 vài theme có auto load
http://www.ivythemes.com/2013/03/mxfluity-responsive-blogger-template.html
http://www.ivythemes.com/2013/03/mytimeline-responsive-blogger-template.html
cho ai cần

Nếu có thắc mắc, hãy để lại comment phía dưới nhé, admin của cuahangtemplate.com sẵn sàng trợ giúp bạn
chúc các bạn thành công!![/tintuc]