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

6 bình luận

  1. avatar says

    11:27 Ngày 24 tháng 05 năm 2015

    để thanh điều hướng này căn sang bên phải thì làm thế nào bạn?

  2. avatar says

    11:33 Ngày 24 tháng 05 năm 2015

    Bạn muốn căn phần nào hay cả thể qua phải hết?

  3. avatar says

    11:45 Ngày 24 tháng 05 năm 2015

    Mình muốn căn qua phải hết

  4. avatar says

    13:36 Ngày 24 tháng 05 năm 2015

    Mình gặp trường hợp thế này: nhãn có 28 trang mà mình đang cần xem trang số 17, bình thường là load từ trang 1 đến trang 15,16 mới thấy trang 17,bạn có thể hướng dẫn mình làm 1 ô nhảy trang k? để chỉ cần chọn ô 17 là nhảy tới trang 17 liền.

  5. avatar says

    15:41 Ngày 03 tháng 07 năm 2015

    Tớ đã làm y theo nhưng không được chắc tại template có vấn đề gì đó. Làm các bước trên xong mất luôn cái pagenavi cùi ban đầu. Bạn ghé blog tớ coi gium xem nó bị sao với: http://tienganhcuatui.blogspot.com

  6. avatar says

    18:31 Ngày 03 tháng 07 năm 2015

    Ad không cần kiểm tra nữa, tớ không dùng thủ thuật này nữa rồi!

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.