Bài mới nhất
Loading...
08/04/2014

Phân trang tự động tải thêm bài viết cho blogger với Ajax Jquery

Với thủ thuật này khi thay vì sử dụng một tiện ích phân trang có các Button số để bấm thì nó sẽ hiển thị khi bạn bấm vào nút tải thêm bài viết. Điểm đặc biệt của phân trang này là nó sử dụng Ajax Jquery cho nên bài viết của bạn sẽ được tải thêm khi bấm vào nút tải thêm mà không cần phải tải lại trang web.

Phân trang tự động tải thêm bài viết cho blogger với Ajax Jquery
Để thêm nó vào blog bạn chỉ cần làm theo một số bước đơn giản sau:

1. Đăng nhập vào blog.
2. Chọn thẻ Bố cục (Layout).
3. Chọn Thêm tiện ích => Tạo một tiện ích HTML/Javascripts ngay bên dưới phần bài đăng của bạn và dán đoạn code bên dưới vào.

<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:;" >Tải thêm bài viết</a>');c.click(h);var e=a('<img src="http://3.bp.blogspot.com/-AZyqKh-riBI/Uvm8rXjpFQI/AAAAAAAABsg/KG87IcAZzso/s1600/fb-style-loader-namkna.gif" style="display: none;">');f.scroll(k);b=a('<div class="button medium"></div>');b.append(c);b.append(e);b.insertBefore(a("#blog-pager"));a("#blog-pager").hide()}})})(jQuery);
</script>
<style>
.button {text-align: center;border: 1px solid #055;box-shadow: 0 1px rgba(255,255,255,.2) inset;background: #066;color: #fff!important;text-decoration: none!important;cursor: pointer;padding: 5px 10px;}
.button a{color: #fff!important;font-weight:bold;}
.button.medium {padding: 5px 10px;font-size: 15px;}
.button:hover {border: 1px solid #222;background: #2c2a28;}
</style>

* Tùy chỉnh code:
Xóa đoạn code màu vàng nếu trong blog của bạn đã có thư viện Jquery. (Lưu ý giữ lại nếu nó là phiên bản mới hơn nha).
Sửa lại đoạn mình tô màu đỏ cho phù hợp với trang web của bạn nha.
Link ảnh màu tím chính là link ảnh loadding hiển thị khi bạn bấm vào tải thêm bài viết. Bạn có thể sửa thành link ảnh khác nếu muốn.

4. Lưu mẫu lại và quay trở lại trang blog của bạn để xem kết quả bạn đã thực hiện nha.

0 nhận xét:

Đăng nhận xét

 
Toggle Footer