kynangblogTạ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.

Demo for Post

Ảnh minh họa:

☼ 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ử HTML (Không cần mở rộng tiện ích mẫu)

4- Đặ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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ9m5CYm4sLsw0lyud8NqKxRykBHJoFxHzQA0WnX1IcMqujyyn7-8cqQSkKCKy_yNnPqy2ohOE_YX-znD3_YtHm0ooY828-CxYlRv3_XyRyipFAd8iN9gIgWfNcYMFgsHmtGfjoDUO8OoF/s1600/nav_logo-namkna-blogspot-com.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

5- Đặ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..)

6- Sau đó bấm Lưu Mẫu lại.

7- Tich chọn mở rộng tiện ích mẫu Tìm tất cả các 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"'.

8- Sau đó bấm Lưu Mẫu lại.

9- (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.

Chủ đề:

KỸ NĂNG BLOG

24 tháng 6, 2012

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

0 nhận xét:

Đăng nhận xét

Về đầu trang

TÌM KIẾM MỘT CHÚT IN 1000 BÀI

Auto reload

Featured Video

Xem nhiều tuần qua

Lưu trữ Blog

Time

Slide show

Online

Online

LIÊN KẾT BẠN BÈ

Người theo dõi

Đến tuần

Liên kết