Tạo phân trang (page navigation) cho Blogspot

Thanh điều hướng cho Blogger được viết bởi Anhvo, đây là phân trang mình đánh giá cao cùng với phân trang của Abu Farhan bởi tính nhẹ nhàng. Chỉ dựa vào tổng số lượng bài viết và ngày tháng bài đăng mới nhất toàn blog hoặc từng nhãn được lấy từ feed. Tổng số lượng bài viết chỉ cần thông tin đầu tiên từ feed và dữ liệu được ngắt bởi max-results=0, ngày tháng bài đăng mới nhất được ngắt bởi max-results=1 có chứa thông tin của bài đăng mới nhất toàn blog hoặc từng nhãn. Việc không lấy toàn bộ dữ liệu từ feed để tạo phân trang không những giúp blog tải nhanh mà còn không bị lỗi với blog có trên 500 bài viết, đây là số lượng bài viết tối đa mà feed lưu trữ.

Xem ảnh minh họa

Nếu bạn đã lỡ (nhỡ) xài kiểu phân trang khác mà lại kết kiểu phân trang này thì phải xem lại cách cài đặt kiểu phân trang đó rồi làm ngược lại các bước để tháo nó ra khỏi Template rồi bắt đầu cài đặt kiểu phân trang này, theo hướng dẫn sau đây.

☼ Cách tiến hành:

   1- Đăng nhập vào Blog

   2- Vào thiết kế

   3- Chọn Chỉnh sửa HTML.

   4- Chọn Mở rộng Mẫu Tiện ích => Và tìm đoạn mã:

<b:include name='nextprev'/>

   4- Thay thế nó bằng 1 trong 2 đoạn mã dưới đây nếu bạn thích mẫu nào thì thay nó bằng đoạn code tương ứng nha:
Mẫu 1:
Xem ảnh minh họa 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 = "2247542137056218612";
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>

Thay thế 2247542137056218612 thành BlogID của bạn và 5 thành số bài đăng bạn muốn hiển thị trên 1 trang.

Mẫu 2: 
Xem ảnh minh họa bên dưới

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style type='text/css'>
.blogpager {
font-size:16x;
color:#0033FF;
font-weight:bold;
background:#CCC;
border:1px solid #bbb;
padding:0px 4px;
}
</style>
<div align='center' style='margin:5px;'>
<form action='#' name='pager20'>
<span id='vwg-pager-first'/>&amp;nbsp;<span id='vwg-pager-prev'/>&amp;nbsp;<input name='showingpage' onfocus='this.select()' size='4' title='Nhập số trang bạn muốn đến' type='text' value='init...'/>/<input disabled='disabled' name='pagestotal' size='4' type='text' value='init...'/> <input onclick='checkpager()' type='button' value='Go'/> <span id='vwg-pager-next'/>&amp;nbsp;<span id='vwg-pager-last'/>
</form>
</div>
<script type='text/javascript'>
var blogID = &quot;2247542137056218612&quot;;
var home_page = &quot;http://namkna.blogspot.com/&quot;;
var pager_max_main = 7;

var pager_first_text = &quot;First&quot;; // Bạn có thể đổi thành Đầu
var pager_last_text = &quot;Last&quot;; // Bạn có thể đổi thành Cuối
var pager_prev_text = &quot;Prev&quot;; // Bạn có thể đổi thành Trước
var pager_next_text = &quot;Next&quot;; // Bạn có thể đổi thành Sau
</script>
<script type='text/javascript'>
//<![CDATA[
/********************************
Blogger Pager Script v2.0
(C) 2008 by Anhvo, http://vietwebguide.com
Visit http://www.vietwebguide.com to get more cool hacks
********************************/

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 = "Nhảy đến trang: (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 = "Nhảy đến trang: ("+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 = "Nhảy đến trang: ("+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 = "Nhảy đến trang: ("+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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>

Thay thế 2247542137056218612 thành BlogID của bạn và 5 thành số bài đăng bạn muốn hiển thị trên 1 trang.

Cách xác định ID blogspot:

- bạn vào Thiết kế sau đó copy URL của trang Thiết kế

Trong đó phần chữ màu đỏ là ID:

http://www.blogger.com/rearrange?blogID=2247542137056218612

Xem thêm: Phân trang cho Blogspot dùng CSS
Chúc thành công!