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. Điểm đặc biệt khi áp dụng tiện ích này không hề phát sinh lỗi HTML 5 nên bạn có thể yên tâm áp dụng nó.
Các bạn có thể xem demo theo link bên dưới:
Các bạn có thể xem demo theo link bên dưới:
» XEM DEMO
» Thêm tiện ích Nút like với hiệu ứng ẩn hiện sau lá cờ trên sidebar cho blogspot
Để 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. Thêm đoạn code bên dưới vào trước thẻ đóng ]]></b:skin> trong mẫu của bạn.
3. Thêm đoạn code bên dưới vào trước thẻ đóng ]]></b:skin> trong mẫu của bạn.
.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;}
4. Dán đoạn code bên dưới vào trước thẻ đóng </body>
(Bạn cũng có thể thêm bằng cách 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).
(Bạn cũng có thể thêm bằng cách 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6cNL0eRJTb4yN18-gd_pwClLwWir5lg0qEBryGX-J1CWjUAoimzVzPh1UKIRYlKo1xXgsLYBJ9SJ53HDUFfthRY7kH7Vz6viy3KeYy53TTohBxWrBL85v7eqpZdFcaxmFahlOoesfuzU/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>
» Tùy chỉnh code:
- Xóa đoạn code màu xanh 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 vao 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.
5. 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.
Hãy để lại comment bên dưới nếu bạn gặp bất kỳ khó khăn nào khi áp dụng thủ thuật này vào trang blog của bạn nha. Đừng quyên chia sẻ nếu bài viết có ích để nhiều người cùng biết đến nó nha.
Nhận xét
không hiện gì hết cả, code không hoạt động..:-)
Trả lờiXóaChuẩn
Xóa@ truong linh: Nguyên nhân là do xung đột code . Em hãy vào trang của em và xóa đoạn code phân trang hiện tại mà em đang sử dụng có dạng tương tự như bên dưới sau đó áp dụng thủ thuật này nha.
Xóa<script type='text/javascript'>
//<![CDATA[
var pageCount=6;
var displayPageNum=2;
var upPageWord ='« Previous'
var downPageWord ='Next »';
................................
ge+"feeds/posts/full/-/"+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}};
//]]>
</script>
Oke lát anh check ngay :)
Trả lờiXóaNhững bài viết nó không hiển thị ảnh thumbnail là do hình ảnh em chèn từ host khác không phải em tải lên host của blog nha em. EM hãy tải nó lên thẳng blog sẽ không bị như vầy nữa.
Trả lờiXóaNipem có một chút khó khăn khi dùng blogspot là mún coi một bài nào đó ở lưng chừng, ví dụ họ có tới 500 bài viết, như bên blogyahoo có phân trang, em có thể tìm vào trang 25 dễ dàng, nhưng bên này, rất khó tìm những bài xa xa anh ơi, giúp em được kg?
Trả lờiXóaHiện nay có một số dạng phân trang như sau em có thể tham khảo để chọn cho mình nha.
Xóa- Phân trang chọn chính xác số trang XEM NGAY với loại này em chỉ cần điền số trang vào là enter thôi em ak.
- Phân trang có số bấm khoảng PHAN TRANG CHO BLOG TRÊN 300 BÀI VIẾT
- Ngoài ra còn rất nhiều loại em có thể chọn một dạng thích hợp ở dây na: TÌM THÊM PHÂN TRANG KHÁC
mình đã làm theo hướng dẫn nhưng không hiển thị
Trả lờiXóaRemove tiện ích phân trang cũ trước khi áp dụng thủ thuật này. Nếu không tìm thấy tiện ích phân trang đó thì, Bạn hãy để lại link trang của bạn đã áp dụng thủ thuật đó ở đây nha (Hiện tại bạn có nhiều trang quá).
XóaNhận xét này đã bị tác giả xóa.
XóaBạn giúp mình với, mình đang muốn thêm load more vào trang sau nhưng không được http://www.studyenglisheveryday.com/p/videos.html
Xóaemail của mình elizabethtong79@gmail.com
Cảm ơn bạn trước nhé!
đây bạn ơi : http://tinnhanhinhdep.blogspot.com/
Trả lờiXóabạn xem giúp mình với nhé
template mình lấy ở đây: http://www.fchiase.com/2013/12/template-mobile-noel-2-giao-dien-chao.html
email của mình: vietnamproxy@gmail.com
Mình đã gửi mail cho bạn. Bạn kiểm tra nha.
Xóamình gửi mail rùi nhé
Trả lờiXóabạn xem giúp mình nha !
Thêm vào mất luôn cả danh sách các bài đăng trên trang chủ Nam ạ!
Trả lờiXóaTrang của bạn đã áp dụng thủ thuật này đâu mà bảo mất bài đăng thế bạn.
XóaKhông áp dụng được nên mình mới xóa đi mà. Làm lại thì chỉ hiện tiêu để của đoạn html/javascript thôi à.
Xóamình áp dụng thành công cho blog choixedo.com rồi nhưng lại gặp 1 vấn đề nhỏ là check ở http://validator.w3.org/check?uri=http%3A%2F%2Fwww.choixedo.com&charset=%28detect+automatically%29&doctype=Inline&group=0 thì lại báo lỗi, bạn có thể fix giúp mình được không
Trả lờiXóacảm ơn bạn nhé
Bạn có thể làm lại nha. Mình đã cập nhật lại code rồi đó bạn ak.
XóaAnh ơi... Em áp dụng giống hệt bài hướng dẫn, nhưng nó không load được bài anh à... Vẫn giữ nguyên như cũ
Trả lờiXóahttp://sinitest1.blogspot.com/
Anh giúp e xem có sai lỗi nào không? :(
Mail: leeconghau@gmail.com
1. Sử dụng dấu ngắt khi đăng bài để giảm tải thời gian và dung lượng trang.
Xóa2. Bỏ tiện ích phân trang đang sử dụng .
anh cho em hỏi em cứ thêm code gì vào mà có ký tự && là nó ko nhận ạ
Trả lờiXóaLỗi thế này ạ: Lỗi khi phân tích cú pháp XML, dòng 2231, cột 292: The entity name must immediately follow the '&' in the entity reference.
code của anh cũng vậy, anh giúp em được không, em cảm ơn!
Em chỉ cần thêm đoạn amp; vào sau ký tự & đó là oke. Sau khi thêm e sẽ được như sau:
Xóa&
Anh @Nam Ta
XóaEm cảm ơn anh, em cũng định làm thế nhưng hơi lâu nên e chọn cách là em bỏ hết code vào 1 tiện ích rồi và làm được rồi
XóaNhưng giờ có 1 lỗi đó là background của nó tràn hết trong khung bài đăng anh ạ!
Em nghĩ lỗi đó là do js nên em ko biết khắc phục thế nào, vì css em chỉnh hết rồi mà vẫn ko khắc phục được
Anh xem giúp em: http://hauisale.blogspot.com/
Em cảm ơn!
Do phần <div class="main-wrapper"> của em không có thẻ <div class="clear" /> nêu mới có hiện tượn đó.
XóaE vào mẫu tìm đoạn có dạng thu gọn như sau:
<div class="main-wrapper">....</div>
và thêm vào sau nó đoạn bên dưới;
<div class="clear" />
Em đã làm theo cách của anh rồi nhưng vẫn không khả thi anh ạ!
XóaVì lý do đó mà em không đóng khung text lại làm button được nên em phải sử dụng hình ảnh thay cho text "Xem thêm"
Nhưng khi sử dụng hình ảnh lại phát sinh thêm lỗi là nó chỉ load thêm được 1 lần thôi ạ, nghĩa là mình chỉ bấm nó hiển thị thêm 1 lần nữa thôi mặc dù bài viết còn nhiều ạ!
Anh giúp em ạ!
Đây là web của em: http://www.hauisale.com/
Waiting for you!
Hiện tại a vào test thì thấy tải được vô hạn đó em ak, không phải chỉ tải được một lần đâu. E thử xóa cookie và history trình duyệt rồi thử lại sẽ thấy hiệu quả.
XóaMẹo nhỏ e nên đặt số bài viết được tải là số chia hết cho 4 (vì mỗi hàng có 4 bài hiển thị) để mỗi lần tải không bị vỡ bố cục nha.
Vâng! Em cảm ơn anh nhiều.
XóaEm đã làm được nhưng với việc sử dụng hình ảnh như vậy thì liệu còn cách nào để thêm hiệu ứng quay vòng tròn lúc đang load ko ạ, và hiệu ứng làm mờ viền bên trên nút tải thêm (giống cucre.vn) được không a?
Tiện thể cho phép em hỏi nốt một vấn đề em khá quan tâm và muốn nhờ anh giải quyết lâu lắm rồi, nó trở thành nan giải rồi. Đó là em "muốn viết nhiều nội dung cũng như hình ảnh trong bài đăng mà không cần kỹ thuật Insert Jump Break" được không ạ? Vì khi dùng kỹ thuật đấy thì thumb ngoài trang chủ sẽ thêm chữ "view more" hoặc "xem thêm" nên thumb bên dưới bị đẩy xuống làm loạn trang chủ luôn, hoặc dùng kỹ thuật đó mà bỏ chữ "view more" đi vẫn bị đẩy vì nó vẫn chừa khoảng trống cho "view more".
Thực sự rất cần anh giúp và hệ thống của em phát triển hay không là nhờ anh rất nhiều!
Em cảm ơn anh và hy vọng sẽ có ngày được gặp và báo đáp cho anh :)
đÓ LÀ hiệu ứng lazy load: XEM
Xóanếu khong dùng Insert Jump Break thì bài viết của em sẽ mất nhiều nội dung, trong trang index những bài nào có quá nhiều ảnh và dung lượng cao sẽ không hiển thị.
bạn có thể xóa nút đọc thêm bằng cách xóa đoạn:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
Nam ơi,cậu cho mình xin cái code phân trang giống như cái phân trang mà blog cậu đang dùng được không. Mình thích nó đơn giản vậy thôi. Blog mình: Yêu Tiếng Anh
Trả lờiXóanam ơi giúp mình với :(
Trả lờiXóasao blog mình mỗi khi qua ngày ví dụ mình viết thêm 1 bài mới thì nó hiển thị ở trang chủ 1 bài đó thôi , net qua trang 2 thì có 1 2 bài viết ko có mặt ở đó
blog mình đây mình để nguyên ko viết bài mới để cậu xem giúp mình với http://zonct.blogspot.com/
giúp mình với nha cãm ơn cậu nhiều :)
Bạn làm theo bài hướng dẫn sau nha;
Xóa: SỬA LỖI MẤT BÀI VIẾT KHI XEM THEO NHÃN VÀ TRANG CHỦ
cãm ơn nam nhiều nha
Xóamình làm dc rồi :) chắc còn học hỏi và làm phiền nam nhiều đấy :D
Không có gì đâu bạn. Có gì bạn cứ để lại comment nha.
XóaAnh Nam ơi! Anh cho em hỏi sau khi mà em áp dụng thì tiêu đề không còn hiển thị trên trình duyệt nữa a! Anh có thể chỉ dẫn em cách khắc phục không a?
Trả lờiXóahttps://lh3.googleusercontent.com/-UPWZ_CpBrPM/U83zAQGIWmI/AAAAAAAAXeA/BZr5P4ta-jo/s0/53cdf2ff65ce9.png
Không liên quan đâu em ak. E kiểm tra sau thẻ <head> trong blog e đã có đoạn code bên dưới chưa nha:
Xóa<title>
<b:if cond='data:blog.pageType == "index"'>
<data:blog.pageTitle/>
<b:else/>
<b:if cond='data:blog.pageType != "error_page"'>
<data:blog.pageName/> | <data:blog.title/>
<b:else/>
404 | <data:blog.title/>
</b:if>
</b:if>
</title>
Em làm được rồi ạ, cảm ơn anh nhé! ^^
Trả lờiXóaKhông có gì đâu em.
Xóaanh cho em hỏi với : mình muốn nó không hiện thị tải thêm bài viết khi đã hết bài viết rồi thì có sửa được không ak .Để ai vào web khỏi mất công hoặc nhầm ấn 1 lần nữa nhưng không hiện thêm bài nào nữa ak em cảm ơn anh
Trả lờiXóaTất nhiên là được nhưng phải code lại e ak.
Xóavâng anh ,lúc nào rỗi anh up cách sửa cho em và các bạn khác với ,viết code em ngu lắm toàn đi copy của anh và người khác ak
Trả lờiXóaAnh kiểm tra lại dùm em cái đoạn Code số 4. Em đã thêm vào, nhưng khi save lại thì nó báo lỗi sai "&". Với lại a xem giùm e cái web của em, cần xóa đoạn COde nào để nó mất cái Load More Next Prev cũ đi ạ !
Trả lờiXóaBlog của em đây thesims4vn.blogspot.com
Thay đoạn đó thành đoạn mã sau: XEM MÃ
Xóaad ơi nó báo lỗi nữa rồi
Trả lờiXóaxem giúp vũ với: dichvuinpp.blogspot.com
Bạn ơi, mình đã làm theo hướng dẫn ròi nhưng sao nó ko có gì thay đổi nhỉ, bạn xem giúp mình được ko?
Trả lờiXóaBlog mình: cuoitekhoi.blogspot.com
Cảm ơn bài viết. Đã áp dụng thành công>
Trả lờiXóaBlog mình: http://vnminhtriet.blogspot.com/
Anh ơi anh có thể chỉ em sửa nút Load more post thành tiếng việt được không sao em tìm hoài đoạn code trong team mà ko thấy đâu hết.
Trả lờiXóahttp://luutrutintuc.blogspot.com/