Đây là tiện ích dùng các phím di chuyển trên bàn phím để xem các trang tiếp theo trong phân trang . Nó giúp người dùng không phải dùng đến chuột mà thao tác hoàn toàn trên bàn phím. Đây là một tiện ích đơn giản, có dung lượng nhẹ load nhanh và ổn định không phụ thuộc vào bất kỳ một thư viện javascrits nào bên ngoài, và điều nữa cài đặt nó thực sẽ tốt. Tiện ích này cung cấp cho người dùng trải nghiệm tốt hơn khi xem trang và tiến hành chuyển hướng sang các trang tiếp theo của blog. Độc giả của bạn sẽ không phải dùng chuột để kéo xuống phía dưới cùng của trang để và tìm kiếm các liên kết bài đăng cũ hơn và mới hơn truyền thống của blogger. Họ chỉ cần sử dụng các phím mũi tên trên bàn phím.

Các bước thực hiện :
1. Đăng nhập blogger
2. Chọn bố cục 
3. Thêm tiện ích HTML/Javescript và dán code bên dưới vào 

<script type='text/javascript'>
document.onkeyup = function(event)
{
if (document.activeElement.nodeName == 'TEXTAREA' || document.activeElement.nodeName == 'INPUT') return;
event = event || window.event;
switch(event.keyCode)
{
case 37:
var newerLink = document.getElementById('Blog1_blog-pager-newer-link');
if(newerLink !=null) window.location.href = newerLink.href;
break;
case 39:
var olderLink = document.getElementById('Blog1_blog-pager-older-link');
if(olderLink!=null) window.location.href = olderLink.href;
}
};
</script>

4. Lưu lại và xem kết quả 

Page navigation for Blogger with Google Style

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.

Ảnh minh họa:

Chú ý: Hiện nay Viettin365 đã có bản cập nhật cho tiện ích này. Các bạn hãy thực hiện thủ thuật mới Tại đây (Click here) để khắc phục một số lỗi của tiện ích cũ này nha.

» 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) - Tiếp tục => Xem video:

4. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></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/AVvXsEioa6e0-w-AdUTfjbn9z92fNy6Ay4l3IwQuc_tCD_E2HKt-vMqVABoO_B5IX2yaUGUq7b4S8lX9GsBTOOMrGNRZICWX9h3pXHltfQtNUZJBkpWQ7AJOziHeX5HVkoA6PzqorXlKGRvEB9p6/s500/cooltext987481804.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. 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- (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ú ý: Hiện nay namkna đã có bản cập nhật cho tiện ích này. Các bạn hãy thực hiện thủ thuật mới Tại đây (Click here) để khắc phục một số lỗi của tiện ích cũ này nha.

Chắc hẳn mỗi người dùng Blogger đều tạo phân trang(page navigation) để blog tải nhanh và trông gọn gàng hơn. Tuy nhiên khi click vào tên nhãn ở widget label hay là ở thanh trạng thái breadcrumb của mỗi bài đăng thì số bài đăng hiển thị trên 1 trang lại lên đến 20 theo mặc định.

Thực ra việc hiển thị số bài đăng trên 1 trang là thêm vào sau địa chỉ dòng ?&max-results=5 để ngắt trang. Vì vậy để sửa lỗi này ta chỉ việc thay tất cả dòng:

expr:href='data:label.url'

thành: 

expr:href='data:label.url + "?&max-results=5"'

Thay 5 thành số bài đăng bạn muốn hiển thị trên 1 trang.

Abu Farhan có nhiều code phân trang cho blogspot khá đẹp. Một trong số đó là kiểu phân trang dạng cuộn sử dụng plugin cho Wordpress có tên Paginator 3000 dựa theo ý tưởng của Ecto.ru và code của Karaboz.ru.

Page Navigation có nhiều phiên bản. Nhưng trong quá trình thực nghiệm, cũng như tham khảo những ý kiến phản hồi của các Blogger trong và ngoài nước, theo namkna thì tiện ích Page Navigation do Abu-Farhan phát triển là hoàn thiện nhất, do khắc phục được các nhược điểm “chết người” như :

1. Chỉ hỗ trợ tên miền .blogspot.com
2. Chỉ hỗ trợ tối đa 500 bài viết
3. Phải đọc tất cả các JSON file và vì vậy, nếu blog bạn có quá nhiều bài viết thì thời gian tải trang sẽ rất “khủng”
4. Tốn nhiều thời gian để tính toán tất cả các bài viết hiện có.
5. Phải can thiệp vào script để chèn Blog ID…v.v…

Lần trước đã giới thiệu Paginator dạng số. Hôm nay Vietin365 xin giới thiệu đến các bạn style Beautiful New Page Navi For Blogger With Scroll của tiện ích này, và tất cả chúng đều do Abu-Farhan phát triển :

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- Thêm đoạn code sau vào trước thẻ  ]]></b:skin> .

.paginator {
margin-top:2px;
font-size:1em;
}
.paginator table {
border-collapse:collapse;
table-layout:fixed;
width:100%;
}
.paginator table td {
padding:0;
white-space:nowrap;
text-align:center;
}
.paginator span {
display:block;
padding:3px 0;
color:#fff;
}
.paginator span strong,
.paginator span a {
padding:2px 6px;
}
.paginator span strong {
background:#ff6c24;
font-style:normal;
font-weight:normal;
}
.paginator .scroll_bar {
width:100%; height:20px;
position:relative;
margin-top:10px;
}
.paginator .scroll_trough {
width:100%; height:3px;
background:#ccc;
overflow:hidden;
}
.paginator .scroll_thumb {
position:absolute;
z-index:2;
width:0; height:3px;
top:0; left:0;
font-size:1px;
background:#363636;
}
.paginator .scroll_knob {
position:absolute;
top:-10px; left:50%;
margin-left:-10px;
width:30px; height:24px;
overflow:hidden;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2hHd38IDU7ecFVGh-1LWQcyJdC2_sNFhnDKlR5O5VIqPXQZUCqcEAYhxIYQzS3z50hZAdIA_70fDNpxe5UH5SAWDsIGRA5e-uEr8A8V39mSkM35ejlG8W2l1eEgE7ExqJ_6rTJoIhyphenhyphengho/s1600/slider_knob-namkna-blogspot-com.gif) no-repeat 50% 50%;
cursor:pointer; cursor: hand;
}
.paginator .current_page_mark {
position:absolute;
z-index:1;
top:0; left:0;
width:0; height:3px;
overflow:hidden;
background:#ff6c24;
}
.fullsize .scroll_thumb {
display:none;
}
.paginator_pages {
width:600px;
text-align:right;
font-size:0.8em;
color:#808080;
margin-top:-10px;
}

   4-  Chèn đoạn code sau vào trước thẻ đóng </body>

<script 
src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000.js' 
type='text/javascript'></script>      
<script type='text/javascript'>       
var home_page=&quot;/&quot;;       
var urlactivepage=location.href;       
var postperpage=7;       
var numshowpage=6;       
</script>       
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>

   5- Tìm tất cả các đoạn code có dạng :

'data:label.url'

và thay thế nó thành :

'data:label.url + "?&max-results=8"'

với 8 là số bài viết sẽ hiển thị trên mỗi trang

* Lưu ý : giá trị max-result phải bằng giá trị postperpage (8) trong đoạn code ở bước 3

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

Page Navigation đối với đa số các website là một công cụ không còn xa lạ. Nhưng với blogger thì công cụ này vẫn chưa được hỗ trợ mạnh lắm. Chỉ có nút Next và Preview thôi. Tham khảo ở một số nơi mình đã chế biến lại cái navipage cho blog của mình. Bạn có thể làm theo hướng dẫn dưới đây.

1. Trước tiên việc bạn cần làm là chọn 1 trong các mẫu phía dưới.

.pagenavi{background:#f1f1f1;clear:both;margin:30px auto 20px;text-align:center;border:1px solid #bfbfbf;padding:3px 0}
.pagenavi span,.pagenavi a{border:1px solid #f1f1f1;padding:1px 4px;color:#000;margin:2px;font-size:12px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{border:1px solid #bfbfbf;background:#fffdf0;color:#000;text-decoration:none}
.pagenavi .pages{color:#666}

.pagenavi{background:#3498b9;clear:both;margin:30px auto 20px;text-align:center;border:1px solid #2f7a93;padding:4px 0}
.pagenavi span,.pagenavi a{font-weight:bold;padding:7px 8px;color:#fff;margin:1px;font-size:11px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{background:#236e8f;color:#fff;text-decoration:none}
.pagenavi .pages{color:#fff}

.pagenavi{clear:both;margin:30px auto 20px;text-align:center}
.pagenavi span,.pagenavi a{background:-moz-linear-gradient(center top,#96aeba,#536a75) repeat scroll 0 0 transparent;border:1px solid #616e76;padding:4px 8px;color:#fff;margin:2px;font-size:12px;-moz-border-radius:4px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{color:#fff;background:#c70e0c;border:1px solid #782f28;text-decoration:none}
.pagenavi .pages{color:#fff}

.pagenavi{clear:both;margin:30px auto 20px;text-align:center}
.pagenavi span,.pagenavi a{background:#24bde2;border:1px solid #4adcff;padding:3px 8px;color:#fff;margin:2px;font-size:12px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{color:#fff;background:#ff6734;border:1px solid #ddd;text-decoration:none}
.pagenavi .pages{display:none}

.pagenavi{clear:both;margin:10px auto;text-align:center}
.pagenavi span,.pagenavi a { font-size:12px;padding: 2px 4px 2px 4px;margin: 2px;border: 1px solid #dfdfdf;color:#000;}
.pagenavi a:visited{}
.pagenavi a:hover,.pagenavi .current{color: #FFF;background-color: #e81d1d;border: 1px solid #fb1515;text-decoration:none;}

.pagenavi{clear:both;margin:30px auto 20px;text-align:center}
.pagenavi span,.pagenavi a{background:#1dc1ff;padding:6px 6px;color:#fff;margin:2px;font-size:12px;-moz-border-radius:5px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{background:#ff9200;color:#fff;text-decoration:none}
.pagenavi .pages{display:none}

.pagenavi{clear:both;text-align:right;margin:25px 0 10px 0;font-size:.714em;font-weight:600;line-height:1.4em}
.pagenavi span,.pagenavi a{background:#e1e1e1;border:1px solid #555;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:0 1px 0 #FFF;-webkit-box-shadow:0 1px 0 #FFF;box-shadow:0 1px 0 #FFF;color:#555;margin-left:5px;padding:4px 6px 3px;text-shadow:0 1px 0 #C2C2C2}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{background:-moz-linear-gradient(center top,#45bc3f,#1c6318) repeat scroll 0 0 transparent;border:1px solid #00203B;text-shadow:0 -1px 0 #00203B;color:#fff;text-decoration:none}
.pagenavi .pages{background:none;border:none}

.pagenavi{clear:both;margin:10px auto;text-align:left}
.pagenavi span,.pagenavi a {background:#0e0f10;font-size:12px;padding: 3px 5px;margin: 2px;border: 1px solid #333;color:#fff;}
.pagenavi a:visited{}
.pagenavi a:hover,.pagenavi .current{color: #FFF;background-color: #33393f;border: 1px solid #444;text-decoration:none;}

Vào Thiết kế → chỉnh sửa HTML → Mở rộng tiện ích mẫu. Chèn đoạn code bạn đã chọn vào phía trên thẻ ]]></b:skin>

2. Tiếp tục tìm đoạn code sau:

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

Lưu ý đối với 1 số blog thì chữ Blog Posts được thay bằng Bài đăng trên Blog.  Bạn chèn sau nó đoạn code sau.

<b:includable id='page-navi'>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 5,
numPages: 5,
firstText: "First",
lastText: "Last",
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot;
}
</script>
<script type="text/javascript" src="http://voquocan.googlecode.com/files/pagenavi.min.js"></script>
<div class="clear" />
</div>
</b:includable>

3. Tiếp tục tìm đoạn code sau:

<!-- navigation -->
<b:include name='nextprev'/>

Thay đoạn code trên bằng đoạn code dưới đây:

<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi' />
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi' />
</b:if>
</b:if>

Lưu template lại là xong.
Chú ý trong đoạn code trên.
perPage là số bài hiển thị trên 1 trang.
numPages là số trang hiển thị ra nút bấm
chữ First Last có thể thay thế bằng chữ khác tùy thích.

Chào các bạn!

Để cho blogspost của mình chuyên nghiệp hơn các blogger thường tạo phân trang cho các bài viết của mình. Sau đây mình Viettin365 xin giới thiệu với các bạn một kiểu phân trang khá là dễ làm và đây cũng là kiểu mình đang sử dụng. Hình demo như sau

Bước đầu tiên bạn đăng nhập vào trang quản trị blog của mình và chọn vào mục layout>Edit HTML (nếu bạn dùng giao diện cũ) hoặc template ->Edit HTML->Proccess (nếu bạn dùng giao diện draft)

nhớ là không chọn vào mục ‘Expand Widget Templates’ 

sau đó tìm dòng sau

]]>b:skin>

và thay thế nó bằng đoạn mã phía dưới

/*chiasekienthuc.info page navigation skin start*/

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

/*chiasekienthuc.info page navigation skin end*/
]]>b:skin>

Tiếp đến bạn tìm dòng sau:

body>

và thay thế nó bằng :

/*chiasekienthuc.info page navigation end*/
<b:if cond='data:blog.pageType != "item"'><b:if cond='data:blog.pageType != "static_page"'><script type='text/javascript'>var pageCount=5; var displayPageNum=5; var upPageWord ='Previous'; var downPageWord ='Next'; script><script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>b:if>b:if>

body>

/*chiasekienthuc.info page navigation end*/

bạn để ý các tham số sau 

var pageCount=5;

dòng trên thể hiện số bài sẽ hiện lên mỗi phân trang (ở đây hiện là 5)

var displayPageNum=5;

Dòng trên thể hiện số trước và sau trang hiện tại

Bạn có thể thay đổi những giá trị này để phù hợp với blog của bạn .

Ở bài sau mình sẽ giới thiệu với các bạn về phân trang các label(nhãn)

Chúc bạn thành công !!!

Nếu có một bài viết quá dài sẽ dẫn tới không đẹp mắt, ảnh hưởng ít nhiều đến SEO, Và gây ức chế cho người xem khi cứ phải kéo chuột để xem. Vậy tại sao bạn không chia nhỏ nó ra bằng cách phân trang trên chính bài viết đó. Bài viết này Viettin365 sẽ hướng dẫn các bạn cách phân trang cho bài viết quá dài.

Các bạn có thể xem Demo:
. 

☼ Cách tiến hành:
  1- Đăng nhập vào Blog
  2- Vào Mẫu
  3- Chọn Chỉnh sử HTML (Edit HTML)

  4- Thêm đoạn code sau vào trước thẻ </head>.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioa6e0-w-AdUTfjbn9z92fNy6Ay4l3IwQuc_tCD_E2HKt-vMqVABoO_B5IX2yaUGUq7b4S8lX9GsBTOOMrGNRZICWX9h3pXHltfQtNUZJBkpWQ7AJOziHeX5HVkoA6PzqorXlKGRvEB9p6/s500/cooltext987481804.png" type="text/javascript"></script>

Lưu ý: Để sử dụng lâu dài các bạn hãy tải các file javarscrip về (xem cách tải Tại đây) sau đó Uplaod lên host riêng (host Google code Tại đây hoặc Dropbox Tại đây) để sử dụng lâu dài nha.

  5- Thêm đoạn code sau vào trước thẻ  ]]></b:skin> .

#spaging-container, #snumber-container {
 width: 100%;
}
.spage183 {
 display:none;
}
.sitem183 {
 padding: 3px;
}
.sitem183 a, .sitem183 a.visited {
 font-weight: bold;
 text-decoration: none;
 color: green;
}
.sitem183 a:hover, .sitem183 a.current183 {
 text-decoration: underline;
 color: blue;
}

6. Bấm  Lưu mẫu   

7. Để phân trang trong bài viết, khi đăng bài bạn hãy chuyển sang chế độ soạn thảo bằngHTML để dán vào đoạn code sau:

<div id="spaging-container">
    $pageIn
  Nội dung trang 1
    $pageOut
    $pageIn
  Nội dung trang 2
    $pageOut
    $pageIn
  Nội dung trang 3
    $pageOut
 </div> 

Trong đó: 

Thay nội dung trang 1,2,3 thành đoạn văn bản. Dùng $pageIn để bắt đầu cho một trang và$pageOut để kết thúc trang, phần này bạn có thể soạn thảo bình thường.

Để thêm 1 trang trong bài viết bạn chỉ cần thêm đoạn code bên dưới vào trước thẻ đóng </div>ở trên.

    $pageIn
  Nội dung trang n
    $pageOut

8. Tiếp theo là vị trí đặt phần phân trang. Thường cuối bài viết. Bạn chọn phần soạn thảo HTML của bài viết và pate đoạn code sau vào:

<script type="text/javascript">
 NumberedPage(
  numPage = 3, // Số trang cần phân
  title =  "Trang", // Chữ cần hiển thị như Phần 1 hoặc Trang 1
  separator = "|" // Kí tự ngăn cách
       
 );
     
 </script>

9. Bấm Xuất bản bài đăng và xem thành quả nha.