Tiện ích phân trang PageNavi theo kiểu WordPress cho Blogspot

Tiện ích phân trang dùng để hiện thị 1 số lượng trang theo thứ tự trên blog của bạn nhằm giúp người đọc di chuyển nhanh hơn cũng như giúp blog nhìn hấp dẫn hơn so với giao diện mặc định Bài viết mới hơn, Trang chủ, Bài viết cũ hơn của Blogger.

Hình ảnh minh họa

Thực hiện như sau:
- Đăng nhập Blogspot => Thiết kế => Mẫu => Tùy chỉnh HTML (mở rộng mẫu tiện ích).
- Chèn đoạn Code sau vào trên thẻ </b:skin>

.pagenavi{background:#transparent;clear:both;margin:30px auto 20px;text-align:center;border:1px solid #575757;padding:3px 0}
.pagenavi span,.pagenavi a{border:1px solid #5b5b5b;padding:1px 4px;color:#dd7700;margin:2px;font-size:15px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{border:1px solid #bfbfbf;background:#transparent;color:#bf9000;text-decoration:none}
.pagenavi .pages{color:#dd7700}

Chỉnh lại các thông số màu đỏ trên theo ý thích của bạn.

Lưu ý: 1 số Template có cách sắp xếp code CSS rất khó chịu và nó thực thi Code theo thứ tự từ trên xuống, nếu có những đoạn code trùng chức năng thì nó sẽ thực thi cái trên cùng và bỏ qua các đoạn phía dưới (như template này chẳng hạn). Với hững template như vậy, việc đặt đoạn code trên ngay trên thẻ </b:skin> sẽ không có tác dụng. Lúc này, ta cần dò qua toàn bộ code CSS 1 lần, đối chiếu các vị trí code chức năng trong CSS và sự hiển thị của nó trên Blog để xác định vị trí thích hợp.

Ví dụ: với Template của mình, nếu dán đoạn code trên ngay trên thẻ </b:skin> thì nó sẽ bị vô hiệu hóa bởi 1 lệnh sắp xếp mặc định phía trên. Do vậy, ta phải di chuyển đoạn code này lên phía trên các code có cùng chức năng. Ở đây mình di chuyển nó lên ngay dưới phần này

/* Accents---------------------------------------------- */

ta được kết quả như sau:

/* Accents
---------------------------------------------- */
.pagenavi{background:#transparent;clear:both;margin:30px auto 20px;text-align:center;border:1px solid #575757;padding:3px 0}
.pagenavi span,.pagenavi a{border:1px solid #5b5b5b;padding:1px 4px;color:#dd7700;margin:2px;font-size:15px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{border:1px solid #bfbfbf;background:#transparent;color:#bf9000;text-decoration:none}
.pagenavi .pages{color:#dd7700}

Tiếp theo ta tìm đến dòng này:

<b:widget id='Blog1' locked='true' title='Bài Đăng Trên Blog' type='Blog'>

Phần Bài Đăng Trên Blog là tên khung bài viết của bạn. Nếu không nhớ, bạn có thể search thế này <b:widget id='Blog1' locked='true' title= để tránh việc tìm không thấy đoạn code trên.

Chèn đoạn code sau đây vào ngay dưới nó:

<b:includable id='page-navi'>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 7,
numPages: 9,
firstText: "Trang đầu",
lastText: "Trang cuối",
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot; }
</script>
<script type="text/javascript" src="http://bongnguoilangle.googlecode.com/files/pagenavi.min.js"></script>
<div class="clear" />
</div>
</b:includable>

Trong đó:
perPage: 7         là số bài hiển thị trên 1 trang
numPages: 9      là số trang
firstText: "Trang đầu", lastText: "Trang cuối", nextText: &quot;&#187;&quot;, prevText: &quot;&#171;&quot; là nội dung hiển thị của các lệnh First, Last, Next, Previous.

Tiếp theo, tìm đến thẻ:

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

Thay dòng code màu đỏ bằng đọ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 mẫu (Save Template) và thưởng thức.

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

Javascript:    Hỗn Tạp's Blog

Edited: Bóng Người Lặng Lẽ