Tạo Page Navigation kiểu Google cho Blogger

Có nhiều kiểu để bạn trang trí Page navigation( theo tôi hiểu là chuyển tiếp trang này đến trang kia khi bài viết quá nhiều). Bài viết này tôi giới thiệu với bạn Page navigation style Google.

Xem Demo


Cách thực hiện

Bước 1: Vào bảng điều khiển ->Chọn chỉnh sửa HTML
Bước 2: Click chọn Mở rộng tiện ích
Bước 3: Ctrl + F - Tìm thẻ ]]></b:skin>
Bước 4: Thay nó bằng đoạn code sau

#blog-pager,.blog-pager{ background-color: #FFFFFF;width:100%,text-align:center;}
td.showpageOf{display:none;}
#nav{font-family: Arial, Helvetica, sans-serif; font-size:12px;margin:0 auto;}
#nav a{display:block; text-decoration:none; color: #0066FF}
#nav a:hover{ text-decoration:underline;}
#nav .b a,#nav .b a:visited{color: #0000CC; text-decoration: underline; font-weight:bold}
.cur{ font-weight:bold;}
.csb{background:url(http://www.google.com/images/nav_logo7.png) no-repeat 0 0;height:26px;display:block;}
.csb.cur{background-position: -44px 0pt; width: 16px;}
.csb.movenext{color:#20c;background-position: -76px 0pt; margin-right: 42px; width: 66px;}
.csb.moveprev{color:#20c;background-position: 0pt 0pt; margin-left: 42px; width: 44px;}
.csb.ch{background-position: -60px 0pt; width: 16px;}
#nav td{padding:0;text-align:center}
]]></b:skin>

Bước 5: Tìm đến thẻ </body> và thay nó bằng đoạn code sau:

<script type='text/javascript'>;
var home_page='/';
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>;

<script src='http://accordion-template.googlecode.com/svn/trunk/jsnavigoogle-packer.js' type='text/javascript'></script>
</body>

Tới đây bạn chú ý tới các chỗ màu vàng, bạn sửa lại tùy ý, còn không để luôn cũng không sao

var postperpage=7; <- số bài viết hiển thị ở blog của bạn
var numshowpage=4; <- có bao nhiêu số bạn muốn hiện thị một lần. Thường thì 5, 10. Nếu bạn thích có thể nhiều hơn tùy ý bạn.

Bước 6: Tìm đoạn code: 'data:label.url'
Bước 7: Thay nó bằng đoạn code:

'data:label.url + &quot;?&amp;max-results=7&quot;'

Thay số 6 bằng một số khác nếu bạn thích

Bước 8: Lưu mẫu -> Xem thành quả