Tạo phân trang cho Blogspot

1. Cài đặt CSS

Mở file template của bạn, tìm đến dòng: ]]></b:skin>
Và chèn vào phía trước nó đoạn Code sau

/* Page Navigation */
.pagenavi{clear:both;margin:10px auto;text-align:center}
.pagenavi span,.pagenavi a{padding:3px;margin-right:5px;background:#fff;border:1px solid #c20c0c}
.pagenavi a:visited{color:#c20c0c}
.pagenavi a:hover,.pagenavi .current{background:#c20c0c;color:#fff;text-decoration:none}
.pagenavi .pages,.pagenavi .current{font-weight:bold}
.pagenavi .pages{border:none}

Phần này dùng để định nghĩa một số màu sắc, style cho phần Page navigation.Các bạn có thể sửa cho phù hợp với tông màu của blog của mình.

2. Cài đặt script:

Trong template, tìm đến dòng này: <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

Chèn ngay sau nó đoạn code sau:
Xem Code

<b:includable id='page-navi'>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 5,
numPages: 9,
firstText: "First",
lastText: "Last",
nextText: "Next",
prevText: "Prev"
}
</script>
<script type="text/javascript" src="http://rilwis.googlecode.com/svn/trunk/blogger/pagenavi.min.js"></script>
<div class="clear" />
</div>
</b:includable>

3. Chèn Page Navigation

Bước cuối cùng là bước tìm đến phần cần hiển thị Page Navigation và chèn code. Thông thường phần này ở cuối phần bài viết. Tìm trong template của bạn:
<!-- navigation -->
<b:include name='nextprev'/>

Thay thế nó bằng:

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

Nếu như bạn không tìm được phần nextprev thì hãy để ý đến cấu trúc template của bạn, nó có dạng:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
...
<b:includable id='main' var='top'>
...
</b:includable>
</b:widget>
</b:section>

Chèn đoạn code ở trên vào ngay trước thẻ là được.

Trong đó :
- perPage: số bài viết hiển thị trong 1 trang
- numPages: số trang hiển thị
- firstText, lastText, nextText, prevText: tương ứng là các từ hiển thị cho các nút First, Last, Next, Prev

Chúc Bạn Thành Công!

Nguồn saigontimes.co.cc