Tạo phân trang trong blogspot

Chúng ta đều đã biết rằng Blogger vốn chỉ cung cấp 2 link "Previous" và "Next" để chuyển bài, điều đó hiển nhiên không làm thỏa mãn người dùng.

Ở bài này Klose xin giới thiệu với các blogger cách phân trang của Hỗn Tạp Blog được viết với phong cách của 1 plugin nổi tiếng cho WordPress - WP-PageNavi.

Cách cài đặt:

1. Mở file template của bạn, tìm đến dòng:

]]></b:skin>

và chèn vào phía trước đ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. Bạn nên sửa cho phù hợp với tông màu của blog của mình.

2. Cài đặt script:

Tìm đến dòng sau:

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

Chèn ngay sau nó:

<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ẻ </b:includable> là được.

Cấu hình script

Điểm khác biệt giữa các đoạn code này so với các code khác là không yêu cầu cấu hình địa chỉ blog. Nhờ đó, phần cấu hình trông sẽ sáng sủa hơn chút, và chỉ tập trung vào những thứ cần thiết.

Cấu hình của script này nằm ở bước 2 trong phần cài đặt ở trên. Các tham số bao gồm:

var pageNaviConf = {
perPage: 5,
numPages: 9,
firstText: "First",
lastText: "Last",
nextText: "Next",
prevText: "Prev"
}

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

Xin cảm ơn Hỗn Tạp Blog vì bài viết rất hay này.