Viet Nam Báo: Phân Trang

Showing posts with label Phân Trang. Show all posts

Saturday, September 7, 2013

Phân trang cho blog - Page Navigation

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úc các bạn thành công .

Sunday, April 14, 2013

Phân trang các bài viết dài cho Blogger

Bài viết hôm nay mình chia sẻ cho các bạn 1 thủ thuật rất bổ ích đối với những blog đăng bài viết có nội dung dài, đặc biệt đối với blog đăng tải truyện, tiểu thuyết nhiều phần và nhiều tập. Thực ra thủ thuật này không mới mẻ và cũng có 1 số blogger chia sẻ, tuy nhiên mình đã nhận được nhiều bạn yêu cầu qua email nên mình chia sẻ để các bạn có thể tham khảo thêm. Với cách phân chia nội dung bài viết thế này sẽ rất giúp các bạn dễ dàng quản lý nội dung bài viết, việc đăng tải nội dung cũng logic hơn và giúp người độc dễ dàng thao tác hơn. Thủ thuật này thì bạn hoàn toàn có thể tùy chỉnh nội dung phần phía trước số phân trang thành trang 1, trang 2... hay nội dung 1, nội dung 2... Bạn có thể xem qua demo bên dưới để thấy rỏ hơn hoạt động của thủ thuật này.

» Ảnh minh họa:

» 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 code bên dưới vào trước thẻ </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="http://vncongnghe.googlecode.com/files/paging-container.js" type="text/javascript"></script>

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

.nd-cut {
display:none;
}
.nd-page {
padding: 3px;
}
.nd-page a, .nd-page a.visited {
font-weight: bold;
text-decoration: none;
color: green;
}
.nd-page a:hover, .nd-page a.mcurrent {
text-decoration: underline;
color: blue;
}

6. Save template lại

7. Phân trang cho nội dung bài viêt

Để có thể phân chia nội dung của bài viết ra thành nhiều phần khác nhau thì bạn phải chèn thêm đoạn code bên dưới khi đăng bài.

<div id="noidung-all">

$modoan
Nội dung đoạn 1
$ketdoan

$modoan
Nội dung đoạn 2
$ketdoan

$modoan
Nội dung đoạn 3
$ketdoan

</div>
<script type="text/javascript"> NumberedPage(numPage=3,title="Nội dung",separator="|"); </script>

- $modoan là phần đánh dấu phần mở đầu của 1 đoạn

- $ketdoan là phần đánh dấu phần kết của đoạn đó

Bạn có thể thay số 3 thành số trang bạn muốn phân chia nội dung và thay Nội dung thành tên bạn muốn hiển thị trong mục phân trang, phía trước các số.

Như vậy là xong, khi bạn muốn phân chia nội dung bài viết nào thì chỉ cần đăng theo mẫu như bên trên là được.

» Hướng dẫn bằng video:

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

Thursday, April 11, 2013

Script phân trang cho bảng

Trước đây hẳn bạn nghe nhiều đến script phân trang cho toàn bộ blog và phân trang cho nội dung trong bài viết, chứ ít khi nghe kiểu phân trang cho bảng. Đôi khi bạn cần phải dùng đến bảng (table) để bố trí nội dung theo nhiều cột và nhiều dòng giống như trong văn bản Microsoft Word. Trong trường hợp nội dung quá nhiều thì bảng sẽ trở nên rất dài, khi đó với script phân trang sẽ giúp bảng trở nên gọn gàng hơn.

Để phân trang cho bảng như vậy, bạn hãy thực hiện như sau:
Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Đặt đoạn code sau đây vào trước thẻ </head>.



<script type="text/javascript">


//<![CDATA[


function Pager(tableName, itemsPerPage) {


    this.tableName = tableName;


    this.itemsPerPage = itemsPerPage;


    this.currentPage = 1;


    this.pages = 0;


    this.inited = false;


   


    this.showRecords = function(from, to) {       


        var rows = document.getElementById(tableName).rows;


        // i starts from 1 to skip table header row


        for (var i = 1; i < rows.length; i++) {


            if (i < from || i > to) 


                rows[i].style.display = 'none';


            else


                rows[i].style.display = '';


        }


    }


   


    this.showPage = function(pageNumber) {


          if (! this.inited) {


                   alert("not inited");


                   return;


          }




        var oldPageAnchor = document.getElementById('pg'+this.currentPage);


        oldPageAnchor.className = 'pg-normal';


       


        this.currentPage = pageNumber;


        var newPageAnchor = document.getElementById('pg'+this.currentPage);


        newPageAnchor.className = 'pg-selected';


       


        var from = (pageNumber - 1) * itemsPerPage + 1;


        var to = from + itemsPerPage - 1;


        this.showRecords(from, to);


    }  


   


    this.prev = function() {


        if (this.currentPage > 1)


            this.showPage(this.currentPage - 1);


    }


   


    this.next = function() {


        if (this.currentPage < this.pages) {


            this.showPage(this.currentPage + 1);


        }


    }                       


   


    this.init = function() {


        var rows = document.getElementById(tableName).rows;


        var records = (rows.length - 1);


        this.pages = Math.ceil(records / itemsPerPage);


        this.inited = true;


    }




    this.showPageNav = function(pagerName, positionId) {


          if (! this.inited) {


                   alert("not inited");


                   return;


          }


          var element = document.getElementById(positionId);


         


          var pagerHtml = '<span onclick="' + pagerName + '.prev();" class="pg-normal"> &#171 Prev </span> | ';


        for (var page = 1; page <= this.pages; page++)


            pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> | ';


        pagerHtml += '<span onclick="'+pagerName+'.next();" class="pg-normal"> Next &#187;</span>';           


       


        element.innerHTML = pagerHtml;


    }


}


//]]>


</script>

Bước 2. Đặt đoạn CSS sau đây vào trước dòng ]]></b:skin> để định dạng các thuộc tính cho phần phân trang:



.pg-normal {


       color: red;


       font-weight: normal;


       text-decoration: none;   


       cursor: pointer;   


}


.pg-selected {


       color: black;


       font-weight: bold;       


       text-decoration: underline;


       cursor: pointer;


}

Lưu Template.

Bước 3. Khi tạo nội dung trong một bài viết nào đó, hãy sử dụng cấu trúc HTML cho bảng dưới dạng như sau (ở đây demo bảng có 3 cột và 9 dòng để phân trang thành 3 trang, bạn có thể vận dụng linh hoạt):



<table id="results">


     <tr>


          <th>Heading 1</th>


          <th>Heading 2</th>


          <th>Heading 3</th>


     </tr>


     <tr>


          <td>Column 1 – Row 1</td>


          <td>Column 2 – Row 1</td>


          <td>Column 3 – Row 1</td> 


     </tr>


     <tr>


          <td>Column 1 – Row 2</td>


          <td>Column 2 – Row 2</td>


          <td>Column 3 – Row 2</td> 


     </tr>


     <tr>


          <td>Column 1 – Row 3</td>


          <td>Column 2 – Row 3</td>


          <td>Column 3 – Row 3</td> 


     </tr>


     <tr>


          <td>Column 1 – Row 4</td>


          <td>Column 2 – Row 4</td>


          <td>Column 3 – Row 4</td> 


     </tr>


     <tr>


          <td>Column 1 – Row 5</td>


          <td>Column 2 – Row 5</td>


          <td>Column 3 – Row 5</td> 


     </tr>


     <tr>


          <td>Column 1 – Row 6</td>


          <td>Column 2 – Row 6</td>


          <td>Column 3 – Row 6</td> 


     </tr>


     <tr>


          <td>Column 1 – Row 7</td>


          <td>Column 2 – Row 7</td>


          <td>Column 3 – Row 7</td> 


     </tr>


     <tr>


          <td>Column 1 – Row 8</td>


          <td>Column 2 – Row 8</td>


          <td>Column 3 – Row 8</td> 


     </tr>


     <tr>


          <td>Column 1 – Row 9</td>


          <td>Column 2 – Row 9</td>


          <td>Column 3 – Row 9</td> 


     </tr>


</table>


<div id="pageNavPosition"></div>


<script type="text/javascript"><!--


        var pager = new Pager('results', 3);


        pager.init();


        pager.showPageNav('pager', 'pageNavPosition');


        pager.showPage(1);


//--></script>

Ở đoạn script trên thì số 3 biểu thị số dòng mỗi trang, bạn có thể điều chỉnh tùy theo trường hợp áp dụng của bạn.

Để hỗ trợ thêm mình Upload cho các bạn bằng Video

Chúc thành công!

Tạo phân trang kiểu Google cho Blogspot

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

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

» 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/AVvXsEje8LBD9Zg6X2DuCa2YqrT_lSZgaqqsi-cS66E6l9I3QUGeiLpRXgGSkwJV0mCiXRh2UETRNuehc6GQDEqCj7J5CA5rGgfmpA_e8VqypFya3kxcJeC5tpBd2DNqrr4kyRS0cNR6GhTOyYj9/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.

Numbered Page Navigation Phân trang cho blogspot trên 3000 bài

Page Navigation là một tiện ích không thể thiếu đối với các Pro Blog. Không chỉ điều hướng dễ dàng hơn so với phân trang mặc định của Blogspot, nó còn làm cho Blog của bạn trông bắt mắt và chuyên nghiệp hơn trong mắt đọc giả.

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 đánh giá của 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ư :

Chỉ hỗ trợ tên miền .blogspot.com
Chỉ hỗ trợ tối đa 500 bài viết
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”
Tốn nhiều thời gian để tính toán tất cả các bài viết hiện có.
Phải can thiệp vào script để chèn Blog ID…v.v…

Lần trước Namkna đã giới thiệu Numbered Page Navigation dạng trượt, hôm nay namkna sẽ giới thiệu dạng tĩnh, và tất cả chúng đều do Abu-Farhan phát triển:

Demo for Post

Ảnh minh họa:

Numbered Page Navigation Tạo phân trang cho blogspot - http://namkna.blogspot.com/

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

.showpageNum a {
      padding: 3px 8px;
      margin:0 4px;
      text-decoration: none;
      border:1px solid #999;
      -webkit-border-radius:3px;-moz-border-radius:3px;
      background: #ddd;
      }

    .showpageOf {
    margin:0 8px 0 0;
    }
    .showpageNum a:hover {
      border:1px solid #888;
      background: #ccc;
      }

    .showpagePoint {
      color:#fff;
      text-shadow:0 1px 2px #333;
      padding: 3px 8px;
      margin: 2px;
      font-weight: 700;
      -webkit-border-radius:3px;-moz-border-radius:3px;
      border:1px solid #999;
      background: #666;
      text-decoration: none;
      }

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

<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=8;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>

6. 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 + &quot;?&amp;max-results=8&quot;'

- 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. Lưu lại Lưu mẫu