Tạo phân trang page navigation cho Blogger

Hôm nay mình xin tiếp tục chia sẻ các bạn thanh điều hướng page navigation, nó sẽ giúp các bạn đánh số trang bài viết có trên trang chủ của mình, rất quan trọng nếu blog của bạn có số lượng bài viết lớn.

Thanh điều hướng page navigation cho Blogger

Cũng như hầu hết các bài trước, việc thêm thanh điều hướng page navi khá đơn giản, chỉ cần vài bước
Đăng nhập vào Blogger » Mẫu » Chỉnh sửa HTML
Bây giờ các bạn tìm đến thẻ sau

Code:

<b:includable id='post' var='post'>

Thêm đoạn mã này lên trên

Code:

<b:includable id='ksl-page-navi'>
<div class='pagenavi'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 7,
numPages: 5,
firstText: &quot;Đầu&quot;,
lastText: &quot;Cuối&quot;,
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot;
}
</script>

<script src='https://googledrive.com/host/0B04m_ldP5JJzcFdOTkF0RGNXdzg' type='text/javascript'/>
<div class='clear'/>
</div>
</b:includable>

Trong đó:
perPage: Số lượng bài viết có trên một trang
numPage: Số lượng trang trước khi xuất hiện nút Đầu hoặc Cuối
Tiếp tục thôi, giờ bạn tìm đến đoạn thẻ sau:

Code:

<b:include name='nextprev'/>

Thay thế nó bằng đoạn mã này:

Code:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <b:include name='ksl-page-navi'/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
    <b:include name='ksl-page-navi'/>
    </b:if>
    <b:else/>
    <b:include name='nextprev'/>
    </b:if>

Bước cuối cùng là tô điểm cho nó, các bạn tìm đến thẻ ]]></b:skin>  và thêm đoạn css sau lên trên:

Code:

#blog-pager, .pagenavi {
  clear: both;
  margin: 30px auto 30px;
}
#blog-pager a, .pagenavi span, .pagenavi a {
  color: #ffffff;
  background-color: #2c3e50;
  border-color: #2c3e50;
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 10px 18px;
  font-size: 15px;
  line-height: 1.42857143;
  border-radius: 0;
}
#blog-pager a:visited, .pagenavi a:visited {
  color: #fff;
}
#blog-pager a:hover, .pagenavi a:hover {
  color: #fff;
  text-decoration: none;
  background: #000;
}
.pagenavi .current {
  color: #fff;
  text-decoration: none;
  background: #000;
}
.pagenavi .pages, .pagenavi .current {
  font-weight: bold;
}
.pagenavi .pages {
  color: #fff;
  background: #2c3e50;
}

Đoạn CSS này bạn có thể tùy biến lại toàn bộ sao cho phù hợp với blog của mình.