Phân trang cho blogger kiểu PageNavi và các style đẹp

Đối với mỗi website, khi bạn tìm kiếm theo một label nhất định sẽ hiển thị cho mỗi label là 6, 7 hoặc 8 bài nhất định, còn phía dưới nó là kiểu "Trang Tiếp Theo" rất mất thời gian để tìm kiếm. Vì vậy mình xin giới thiệu với các bạn bài viết "Phân trang cho blogger kiểu PageNavi và các style đẹp". Tiện ích này rất dễ sử dụng, ít rườm rà và ít bị lỗi.

Sau đây là các bước thực hiện:

1. Đăng nhập vào Blogger.
2. Chọn mẫu (Template).
3. Sao lưu mẫu của bạn để đề phòng sảy ra lỗi khi áp dụng thủ thuật này.
4. Nhấp chọn vào Chỉnh sửa HTML (Edit HTML).
5. Thêm đoạn code bên dưới vào trước thẻ ]]></ b: skin>:

Kiểu 1

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

Kiểu 2

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

Kiểu 3

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

Kiểu 4

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

Kiểu 5

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

Kiểu 6

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

Tiếp tục 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: 5,
firstText: "First",
lastText: "Last",
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot; }
</script>
<script type="text/javascript" src="https://googledrive.com/host/0BxH71HJ3wF1Qfi1ScUJnQWdnXzNFcExYNXlydTRVX1I5TWpVUGNIVkd2U2s4S3FrLVdiQms/pagenavi.min.js"></script>
<div class="clear" />
</div>
</b:includable>

Tiếp theo, tìm trong template của bạn:

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

Thông thường sẽ có 3 thẻ Next-Pre trong template của bạn, mình thường thay Next-Pre bên trong thẻ

<b:includable id="main" var="top">

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>

Tùy chỉnh script:

perPage: số bài viết hiển thị trong 1 trang
numPages: số trang hiển thị
firstText, lastText, nextText, prevText: các từ hiển thị cho các nút First, Last, Next, Prev