Tạo phân trang kiểu Google cho Blogspot Theo Hồ Hoàng Thái

Home » Dựng Phim , Phần mềm , Photoshop »

Ở đây Hồ Hoàng Thái xin giới thiệu một kiểu phân trang theo phong cách Google. - Đã test bằng chính Web của mình


» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn Chỉnh sửa HTML (Edit HTML) 

4. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>

5. Chèn tiếp 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=6;
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>

Trong đó:

• 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- 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.

« Trang trước Trang chủ Trang sau »