Tạo phân trang (page navigation) kiểu Google cho Blogspot

Bạn đã xem bài viết về cách tạo phân trang kiểu 1, kiểu 2. Hiện nay trên cộng đồng Blogger có khá nhiều kiểu phân trang khác nhau cho blogspot. Mỗi kiểu đều có nét đẹp và ưu điểm riêng cho nên bạn cần lựa chọn kiểu nào phù hợp nhất để cài đặt cho blog của mình.
Script cho các kiểu phân trang dường như có những điểm na ná giống và cách cài đặt cũng vậy. Ở đây mình xin giới thiệu một kiểu phân trang theo phong cách Google.
Để cài đặt kiểu phân trang này, bạn hãy thực hiện như sau.

Bước 1. Đăng nhập tài khoản Blogger.

- Vào phần thiết kế (Design)

- Chọn chỉnh sửa HTML (Edit HTML)

- Đặt đoạn code dưới đây vào trước dòng ]]></b:skin>.

#nav a,#nav a:visited,.blk a{color:#000}
 #nav a{display:block}
 #nav .b a,#nav .b a:visited{color:#20c}
 #nav .i{color:#a90a08;font-weight:bold}

 
.csb,.ss{background:url(http://lh5.googleusercontent.com/-avTxlwCp9Ow/TmBl_H9Im_I/AAAAAAAACNo/8AaL9j2IzBg/Vatinam.png)
 no-repeat 0 0;height:26px;display:block}
 .ss{background-position:0 -88px;position:absolute;left:0;top:0}
 .cps{height:18px;overflow:hidden;width:114px}
 .mbi{width:13px;height:13px;background-position:-91px -74px;margin-right:3px}
 #nav td{padding:0;text-align:center

Bước 2. Đặt đoạn code bên dưới vào trước thẻ </body>.

<script type='text/javascript'>
var home_page_url = location.href; 

var pageCount=10;
var displayPageNum=9;
var upPageWord ='Trang trước';
var downPageWord ='Trang tiếp';

function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

htmlMap[htmlMap.length]='/';
postNum++;

for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
 timestamp = encodeURIComponent(timestamp1);
 var title = post.title.$t;
   if(thisUrl.indexOf(timestamp)!=-1 ){
     thisNum = postNum;
   }
 
   postNum++;
   htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&amp;max-results='+pageCount;
 
}

var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
 var banyaknomer = htmlMap.length -1 ;
 postNum=postNum-1;
};

 for(var p =0;p&lt; banyaknomer;p++){
 if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
  if(fFlag ==0 &amp;&amp; p == thisNum-2){
   if(thisNum==2){

    upPageHtml = '&lt;a 
href=&quot;/&quot;&gt;&lt;span class=&quot;csb 
ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: 
auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div 
style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord 
+'&lt;/a&gt;&lt;/td&gt;';
   }else{
    upPageHtml
 = '&lt;a 
href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span 
class=&quot;csb ch&quot; style=&quot;background-position: 
0pt 0pt; margin-left: auto; width: 
44px;&quot;&gt;&lt;/span&gt;&lt;div 
style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord 
+'&lt;/a&gt;&lt;/td&gt;';
   }
 
   fFlag++;
  }
 
  if(p==(thisNum-1)){
   if(p==0){

    html += '&lt;span class=&quot;csb&quot; 
style=&quot;background-position: -26px 0pt; width: 
18px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;&lt;td
 class=&quot;cur&quot;&gt;&lt;span 
class=&quot;csb&quot; style=&quot;background-position: -44px
 0pt; width: 
16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';
   }else{

    html += '&lt;td 
class=&quot;cur&quot;&gt;&lt;span 
class=&quot;csb&quot; style=&quot;background-position: -44px
 0pt; width: 
16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';
   }
  }else{
   if(p==0){

     html += '&lt;td&gt;&lt;a 
href=&quot;/&quot;&gt;&lt;span class=&quot;csb 
ch&quot; style=&quot;background-position: -60px 0pt; width: 
16px;&quot;&gt;&lt;/span&gt;1&lt;/a&gt;&lt;/td&gt;';

   }else{

    html += '&lt;td&gt;&lt;a 
href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span 
class=&quot;csb ch&quot; style=&quot;background-position: 
-60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+ (p+1) 
+'&lt;/a&gt;&lt;/td&gt;';
   }
  }
 
  if(eFlag ==0 &amp;&amp; p == thisNum){

   downPageHtml = '&lt;td class=&quot;b&quot;&gt; 
&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span 
class=&quot;csb ch&quot; style=&quot;background-position: 
-76px 0pt; margin-right: 34px; width: 
66px;&quot;&gt;&lt;/span&gt;'+ downPageWord 
+'&lt;/a&gt;&lt;/td&gt;';
   eFlag++;
  }
 }
}
 
if(thisNum&gt;1){
 html = ''+upPageHtml+' '+html +' ';
}
html2
 = '&lt;table id=&quot;nav&quot; style=&quot;margin: 
auto auto 1.4em; border-collapse: collapse;text-align: center; 
direction: ltr;&quot; 
align=&quot;center&quot;&gt;&lt;tbody&gt;&lt;tr 
valign=&quot;top&quot;&gt;&lt;td 
class=&quot;b&quot;&gt;Page  ('+(postNum-1)+')   
&lt;/td&gt;&lt;td class=&quot;b&quot;&gt;';
html3 = '&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;';
html = html2+html;
 
if(thisNum&lt;(postNum-1)){
 html += downPageHtml; 
}else{

 html += '&lt;td class=&quot;b&quot;&gt;&lt;span 
class=&quot;csb&quot; style=&quot;background-position: -76px
 0pt; width: 
42px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;';
}

if(postNum==1) postNum++;
html += html3+ '&lt;/div&gt;';
 
var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
 html ='';
}

for(var p =0;p&lt; pageArea.length;p++){
 pageArea[p].innerHTML = html;
}

if(pageArea&amp;&amp;pageArea.length&gt;0){
 html ='';
}

if(blogPager){
 blogPager.innerHTML = html;
}

}

function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
var
 thisLable = isLablePage ? 
thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length)
 : &quot;&quot;;
thisLable = 
thisLable.indexOf(&quot;?&quot;)!=-1 ? 
thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : 
thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var labelHtml = '&lt;a href=&quot;/search/label/'+thisLable+'?&amp;max-results='+pageCount+'&quot;&gt;';
var thisUrl = home_page_url; 

htmlMap[htmlMap.length]=labelHtml;
postNum++;

for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {
 var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
 timestamp = encodeURIComponent(timestamp1);

 var title = post.title.$t;

   if(thisUrl.indexOf(timestamp)!=-1 ){
    thisNum = postNum;
   }
 
   if(title!='') postNum++;
   htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&amp;max-results='+pageCount;
    
 itemCount++;
}

var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
 var banyaknomer = htmlMap.length -1 ;
 postNum=postNum-1;
};
 
for(var p =0;p&lt; banyaknomer;p++){
 if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
  if(fFlag ==0 &amp;&amp; p == thisNum-2){
   
   if(thisNum==2){

    upPageHtml = labelHtml +'&lt;span class=&quot;csb 
ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: 
auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div 
style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord 
+'&lt;/a&gt;&lt;/td&gt;';
   }else{
    upPageHtml
 = '&lt;a 
href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span 
class=&quot;csb ch&quot; style=&quot;background-position: 
0pt 0pt; margin-left: auto; width: 
44px;&quot;&gt;&lt;/span&gt;&lt;div 
style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord 
+'&lt;/a&gt;&lt;/td&gt;';
   }
 
   fFlag++;
  }
 
 if(p==(thisNum-1)){
   if(p==0){

    html += '&lt;span class=&quot;csb&quot; 
style=&quot;background-position: -26px 0pt; width: 
18px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;&lt;td
 class=&quot;cur&quot;&gt;&lt;span 
class=&quot;csb&quot; style=&quot;background-position: -44px
 0pt; width: 
16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';
   }else{

    html += '&lt;td 
class=&quot;cur&quot;&gt;&lt;span 
class=&quot;csb&quot; style=&quot;background-position: -44px
 0pt; width: 
16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';
    
   }
  }else{
   if(p==0){
    html = 
'&lt;td&gt;'+labelHtml+'&lt;span class=&quot;csb 
ch&quot; style=&quot;background-position: -60px 0pt; width: 
16px;&quot;&gt;&lt;/span&gt;1&lt;/a&gt;&lt;/td&gt;';
   }else{

    html += '&lt;td&gt;&lt;a 
href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span 
class=&quot;csb ch&quot; style=&quot;background-position: 
-60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+ (p+1) 
+'&lt;/a&gt;&lt;/td&gt;';
   }
  }

 if(eFlag ==0 &amp;&amp; p == thisNum){

   downPageHtml = '&lt;td class=&quot;b&quot;&gt; 
&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span 
class=&quot;csb ch&quot; style=&quot;background-position: 
-76px 0pt; margin-right: 34px; width: 
66px;&quot;&gt;&lt;/span&gt;'+ downPageWord 
+'&lt;/a&gt;&lt;/td&gt;';
   eFlag++;
  }
 }
}

if(thisNum&gt;1){
 if(!isLablePage){
  html = ''+upPageHtml+' '+html +' ';
 }else{
  html = ''+upPageHtml+' '+html +' ';
 }
}
 
html2
 = '&lt;table id=&quot;nav&quot; style=&quot;margin: 
auto auto 1.4em; border-collapse: collapse;text-align: center; 
direction: ltr;&quot; 
align=&quot;center&quot;&gt;&lt;tbody&gt;&lt;tr 
valign=&quot;top&quot;&gt;&lt;td 
class=&quot;b&quot;&gt;Page  ('+(postNum-1)+')   
&lt;/td&gt;&lt;td class=&quot;b&quot;&gt;';
html3 = '&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;';
html = html2+html;
 
if(thisNum&lt;(postNum-1)){
 html += downPageHtml; 
}else{

 html += '&lt;td class=&quot;b&quot;&gt;&lt;span 
class=&quot;csb&quot; style=&quot;background-position: -76px
 0pt; width: 
42px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;';
}
 
if(postNum==1) postNum++;
html += html3+ '&lt;/div&gt;';
 
var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
 html ='';
}

for(var p =0;p&lt; pageArea.length;p++){
 pageArea[p].innerHTML = html;
}

if(pageArea&amp;&amp;pageArea.length&gt;0){
 html ='';
}

if(blogPager){
 blogPager.innerHTML = html;
}

}

</script>

<script type='text/javascript'>

 var thisUrl = home_page_url;
 if (thisUrl.indexOf(&quot;/search/label/&quot;)!=-1){
  if (thisUrl.indexOf(&quot;?updated-max&quot;)!=-1){

   var lblname1 = 
thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?updated-max&quot;));
  }else{

   var lblname1 = 
thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?&amp;max&quot;));
  }
 }

 var home_page = &quot;/&quot;;
 if (thisUrl.indexOf(&quot;?q=&quot;)==-1 &amp;&amp; thisUrl.indexOf(&quot;.html&quot;)==-1){ 
  if (thisUrl.indexOf(&quot;/search/label/&quot;)==-1){   

   document.write('&lt;script 
src=&quot;'+home_page+'feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot;
 &gt;&lt;\/script&gt;')
  
}else{document.write('&lt;script 
src=&quot;'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&amp;callback=showpageCount2&amp;max-results=99999&quot;
 &gt;&lt;\/script&gt;')
  }
 }
</script>

Bạn chú ý các code sau:
var pageCount=10; (Số bài viết muốn hiển thị)
var displayPageNum=9; (Số phân trang)
var upPageWord ='« Trang trước'; (Có thể thay đổi chử Trở về thành chử Prev...)
var downPageWord ='Trang tiếp »'; (Có thể thay đổi chử Next..)

Bước 3. Tìm bất kỳ dòng nào như thế này 'data:label.url'.
Rồi thay thế nó bằng dòng 'data:label.url + "?&max-results=10"'.
Cuối cùng lưu (Save Templates) lại là ok.

Bước 4: (có thể thực hiện hoặc không tùy template)Tiếp theo bạn cần định cấu hình bài đăng trên trang chính là 10 bài đăng. Vào Phần tử trang (Page Elements) >> Chỉnh sửa Bài đăng trên Blog (Edit Blog Posts) chọn Số bài đăng trên trang chính là 10.

Theo:abu-farhan.com