Numbered Page Navigation - Phân Trang Cho Blogspot

Sau đây mình sẽ hướng dẫn các bạn thêm phân trang cho blogspot:
Đầu tiên các bạn chọn mẫu (template), Chọn Chỉnh sửa HTML (Edit HTML).


Bước 1: Tìm ]]></b:skin>
.và thêm vào trước nó một trong những đoạn code dưới đây.
Style 1:

.page-navigation{clear:both;margin:30px auto;text-align:center;} .page-navigation span,.page-navigation a{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;} .page-navigation a:hover,.page-navigation .current{background:#CECECE;text-decoration:none;color: #000;} .page-navigation .pages,.page-navigation .current{font-weight:bold;color: #888;} .page-navigation .pages{border:none;}

Style 2:

.page-navigation{clear:both;margin:30px auto;text-align:center;} .page-navigation span,.page-navigation a{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);} .page-navigation a:hover,.page-navigation .current{background:#EC8D04;text-decoration:none;color: #fff;} .page-navigation .pages,.page-navigation .current{font-weight:bold;color: #fff;-webkit-box-shadow: inset 0px -1px 2px 0px rgba(50, 50, 50, 0.69);-moz-box-shadow:inset 0px -1px 2px 0px rgba(50, 50, 50, 0.69);box-shadow:inset 0px -1px 2px 0px rgba(50, 50, 50, 0.69);} .page-navigation .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

Style 3:

 

.page-navigation{clear:both;margin:30px auto;text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;} .page-navigation span,.page-navigation a{padding: 3px 10px;margin-right:5px; color: #fff;} .page-navigation a:hover,.page-navigation .current{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;} .page-navigation .pages{border:none;background: none;}

Bước 2:
Tìm đoạn code sau:
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

Và thêm vào sau nó đoạn code dưới đây:

<b:includable id='page-navi'><div class='page-navigation'><script type='text/javascript'>var pgNavigConf = { perPage: 7, numPages: 6, firstText: "First", lastText: "Last", nextText: "Next", prevText: "Prev" } </script><script src='http://helplogger.googlecode.com/svn/trunk/page-navigation.js' type='text/javascript'/><div class='clear'/></div></b:includable>

Bước 3:
Tìm đoạn code dưới đây:

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

Và thay thế nó bằng đoạn code sau:

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

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