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

Thanh điều hướng breadcrumb và page navigation là những thứ quan trọng nếu blog của bạn có nhiều bài viết cũng như nhãn. Mình đã có lần hướng dẫn các bạn thêm breadcrumb vào blog giúp khách truy cập và công cụ tìm kiếm dễ dàng kiểm soát chuyên mục mà họ đang xem. 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

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

và thêm đoạn mã này này lên trên

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

ở đoạn mã trên bạn thay đổi các dữ liệu sau
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

Mình đã sử dụng hàm include ở đoạn trên bạn có thể tìm hiểu nó là gì và cách sử dụng ra sao tại bài viết này

• Tạo và sử dụng thẻ includable trong Blogger

Tiếp tục thôi, giờ bạn tìm đến đoạn thẻ sau

<b:include name='nextprev'/>

và thay thế nó bằng đoạn mã này

<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

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

Lời kết

Ngoài việc giúp được người dùng dễ dàng thao tác và sử dụng trên blog của bạn, nó còn giúp Google đánh giá cao hơn về chất lượng website của bạn, giúp bạn dễ hơn nếu bạn có nhu cầu đăng ký Adsense cho blog của mình. Về giao diện của thanh điều hướng này nếu bạn không biết cách tùy chỉnh nó, bạn có thể để lại nhận xét mình sẽ hỗ trợ sao cho nó phụ hợp với blog của bạn.