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. Vì thế có nhiều hack cho Blogger ra đời. Hack lần này trình bày về cơ bản không khác các hack trước, chức năng cũng không nổi bật hơn nhiều, chỉ có duy nhất 1 điểm là nó được viết lại hoàn toàn theo phong cách của 1 plugin nổi tiếng cho WordPress - WP-PageNavi. Vì thế, nếu bạn mong chờ 1 bản đột phá hơn cho Blogger, thì điều đó chỉ có thể làm được nhờ các góp ý của các bạn!
Cách cài đặt
1. Cài đặt CSS
Mở file template của bạn, tìm đến dòng:
]]></b:skin> Chèn vào phía trước:/* 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. Màu mặc định này là bản mà Fishers Blog đang dùng. Các 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
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ó:
<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. 
0 Comments