Tạo phân trang cho Blogger (Blogspot)

June 5, 2012
Trong bài viết này, mình sẽ trình bày cách tạo phân trang đẹp kèm theo ô trống để người xem có thể nhập và truy cập đến số trang bất kì trên blog, các bạn có thể xem demo bằng hình ảnh bên dưới hoặc ngoài trang chủ DoPhuQuy's Blog.
Tạo phân trang cho Blogger (Blogspot)

1. Đầu tiên, các bạn vào Thiết kế, chọn Chỉnh sửa HTML, bấm chọn vào ô Mở rộng mẫu tiện ích.
2. Bấm Ctrl+F để tìm đoạn mã bên dưới:
<b:include name='nextprev'/>
Thay đoạn mã vừa tìm được bằng đoạn mã bên dưới:
<b:if cond='data:blog.pageType == "index"'>
<style type="text/css">
.blogpager {
font-size:16px;
color: #060;
font-weight:bold;
padding:0px 4px;
}
</style>
<div align="center" style="margin:5px;"><form action="#" name="pager20"><span id="vwg-pager-first"></span> <span id="vwg-pager-prev"></span> <input name="showingpage" onfocus="this.select()" value="init..." type="text" size="4" title="Enter page number that You want to go" />/<input size="4" type="text" name="pagestotal" disabled="disabled" value="init..." /> <input type="button" onclick="checkpager()" value="Go" /> <span id="vwg-pager-next"></span> <span id="vwg-pager-last"></span>
</form></div>
<script type="text/javascript">
var blogID = "6628069224773557671";
var home_page = "/";
var pager_max_main = 5;
var pager_first_text = "First";
var pager_last_text = "Last";
var pager_prev_text = "Prev";
var pager_next_text = "Next";
</script>
<script type='text/javascript'>
//<![CDATA[
var pager_max_results = 20;
if(location.href.match("max-results=")){
pager_max_results = parseInt(location.href.substring(location.href.indexOf("max-results=")+12).split("&")[0]);
} else if(!location.href.match("/search/label/")){
pager_max_results = pager_max_main;
}
var per_page = pager_max_results ;
if(!location.href.match('/search/label/')) {
pager_feedx = "http://www.blogger.com/feeds/"+blogID+"/posts/summary";
pager_pageurl = home_page+"search";
}
else {
label = location.href.split("/")[5];
label = label.split("?")[0];
label = label.replace(/ /g,"%20");
pager_feedx = "http://www.blogger.com/feeds/"+blogID+"/posts/summary/-/"+label;
pager_pageurl = home_page+"search/label/"+label;
}
var pager_opening = 1;
if(location.href.match("popening=")){
pager_opening = parseInt(location.href.substring(location.href.indexOf("popening=")+9).split("&")[0]);
}
var num_pages = 1;
function createBlogPager(){
var script = document.createElement('script');
script.src = pager_feedx+"?start-index=1&max-results=0&alt=json-in-script&callback=countnumpost";
script.type = "text/javascript";
document.getElementsByTagName('head')[0].appendChild(script)
}
function countnumpost(json) {
var posts = json.feed.openSearch$totalResults.$t;
num_pages = (posts%per_page == 0) ? posts/per_page : Math.floor(posts/per_page)+1;
var a1 = document.createElement("a");
a1.className = "blogpager";
a1.title = "Jump to page: (1)";
a1.href = "javascript:page(1)";
a1.innerHTML = pager_first_text;
document.getElementById("vwg-pager-first").appendChild(a1);
var a4 = document.createElement("a");
a4.className = "blogpager";
a4.title = "Jump to page: ("+num_pages+")";
a4.href = "javascript:page("+num_pages+")";
a4.innerHTML = pager_last_text;
document.getElementById("vwg-pager-last").appendChild(a4);
var prev = (pager_opening!=1) ? pager_opening-1 : 1;
var a2 = document.createElement("a");
a2.className = "blogpager";
a2.title = "Jump to page: ("+prev+")";
a2.href = "javascript:page("+prev+")";
a2.innerHTML = pager_prev_text;
document.getElementById("vwg-pager-prev").appendChild(a2);
var next = (pager_opening!=num_pages) ? pager_opening+1 : num_pages;
var a3 = document.createElement("a");
a3.className = "blogpager";
a3.title = "Jump to page: ("+next+")";
a3.href = "javascript:page("+next+")";
a3.innerHTML = pager_next_text;
document.getElementById("vwg-pager-next").appendChild(a3);
document.pager20.showingpage.value = pager_opening;
document.pager20.pagestotal.value = num_pages;
}
function checkpager(){
var uinput = parseInt(document.pager20.showingpage.value);
if((uinput <= num_pages)&&(uinput >= 1)) {
page(uinput);
}
else {
alert("Invalid page number. Please try by another!");
document.pager20.showingpage.focus() ;
document.pager20.showingpage.select();
}
}
function getDateAndGo(json){
var date2 = json.feed.entry[0].published.$t;
ss = parseFloat(date2.substring(17,19));
if(ss<59) ss++;
if(ss<10) { ss = "0"+ ss; }
date4 = encodeURIComponent(date2.substring(0,17)+ss+date2.substring(23,date2.length));
location.href = pager_pageurl+'?updated-max='+date4+'&max-results=' + per_page + '&popening=' + pager_opening;
}
function page(startindex) {
pager_opening = startindex;
var i = per_page*(startindex-1)+1;
var script2 = document.createElement("script");
script2.src = pager_feedx+"?start-index="+i+"&max-results=1&alt=json-in-script&callback=getDateAndGo";
document.getElementsByTagName('head')[0].appendChild(script2)
}
createBlogPager();
//]]>
</script>
</b:if>
3. Bạn thay 6628069224773557671 thành ID Blog của bạn. Thay số 5 thành số bài viết bạn muốn hiển thị trong 1 trang.
4. Bấm Lưu mẫu để hoàn thành
-----------------------------------
Nguồn tham khảo: Duy Phạm Blog
Đã có 16 lời bình luận cho chủ đề Tạo phân trang cho Blogger (Blogspot). Trang web dophuquy.com rất hoan nghênh đón nhận những lời bình luận mang tính xây dựng từ độc giả.
  1. Unknown Q...có cái hướng dẫn nào chỉ mình chia trang làm thành 2 hoặc 3 cột giống như trang list nhạc và video trang nhà An đó...hôm nọ chia sao mà giờ nó giống như hàm răng khg có niềng vậy..khập khễnh...xấu quắc hà...An muốn chia lại cho đều...Q tìm giúp An nhe...An vô gu gồ gõ mà khg đúng từ khóa...nó hủng có hiện ra site nào cho mình cả.
  2. Đỗ Phú Quý @An Pham: Chia nhiều cột trong bài viết hoặc trang tĩnh đúng ko An? Nếu đúng vậy thì An chờ Q từ đây tới tối sẽ có hướng dẫn cho An. Giờ Q đang bận tí nhé. ^^
  3. Unknown Uh...Sao lại phải còng lưng làm chi cho tội vậy...Q tìm bài đâu đó cho An cũng được mà...phiền Q....thật ngại.:(
  4. Đỗ Phú Quý @An Pham: Hì, Q cứ tưởng chưa ai viết, search Google thử thì thấy có người chia sẽ rồi nên Q ko viết lại nữa. Q có gửi cho An cách làm cụ thể qua email An dùng để hỏi Q hồi trước rồi đó :)
  5. Unknown Bây giờ mới bò vô mail nè....cong đuôi chạy thôi..để làm coi được hay khg rồi mới cho Q hay nha.
  6. Unknown Là lá la...An làm được rồi...Q làm sẳn hết rồi kêu An paste vô thôi...khg làm được chắc trốn Q luôn quá...xấu hổ đó.
    Cám ơn "đàn anh" nhiều lắm lắm nha.:D
  7. Đỗ Phú Quý @An Pham: Hì, chúc mừng An nha!^^
  8. Unknown An ơi.. Xem lại giùm mình với.
    Sao mình làm Next nó không được nhỉ?
    Nó chỉ hiện tối đa có 7 bài viết thôi :(( Trong khi đó mình điền là 20 rồi mà . . . .
    Blog của mình đây nè abc-shopsv.blogspot.com
  9. Đỗ Phú Quý @Thành Pèo: Bạn xem lại bài viết Lỗi không hiện đủ bài viết (Blogger) nhé! :)
  10. Unknown Hjx!... Thanks Q nhé!
    Nhưng có cách nào để giữ cái phân trang đó khi mà mình next trang rồi không?
  11. Đỗ Phú Quý @Thành Pèo: Bạn đính kèm template của bạn qua email mình nhé! :)
  12. Thương Lee Chơi tới tết luôn cũng được 0.05$. Traffic VN chơi Chitika ko có hiệu quả bác ợ!
  13. Trịnh Minh Cảnh http://3.bp.blogspot.com/-fVza2jkJR1U/UOFO5gRCxZI/AAAAAAAABNg/cFS91AGXn5Y/s1600/untitled.JPG

    Admin biết làm phân trang dạng như vậy không ?
  14. Đỗ Phú Quý @Trịnh Minh Cảnh: Nếu bạn muốn tham khảo nhiều kiểu phân trang đẹp cho Blogspot thì mình gợi ý bạn truy cập Blog của Abu Farhan Tại đây :)
  15. tueman84 mình làm được rồi nhưng nó chỉ phân trang cho trang chủ, mà nó không phân trang cho các label, mong bạn Q giúp đỡ
  16. tueman84 mình đã khắc phục lỗi đó được rồi!

 
Di chuyển lên trên cùng



Bình luận bài viết