Phân trang cho Blogspot

Theo mặc định khi tạo blogspotvà đa số các template miễn phí thì không có chức năng tự động phân trang cho blog. Có nghĩa là nó sẽ hiện "Older posts" hay "Newer post" chứ không có phân ra các đánh dấu trang có đánh số cho người đọc dễ theo dõi và thao tác. Sau đây mình sẽ hướng dẫn các bạn cách thêm phân trang.

Bước 1: Vào Mẫu ~> Chỉnh sửa HTML

Bước 2: Ctrl + F và tìm thẻ ]]></b:skin>

Bước 3: Chọn Style tương ứng với các đoạn mã sau:

Mã : 

#blog-pager{clear:both;margin:30px auto;text-align:center;padding:7px}
.blog-pager{background:none}
.displaypageNum a,.showpage a,.pagecurrent{padding:3px 7px;margin-right:5px;background:#E9E9E9;color:#888;border:1px solid #E9E9E9}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color:#000}
.showpageOf{display:none!important}
#blog-pager .showpage,#blog-pager .pagecurrent{font-weight:bold;color:#888}
#blog-pager .pages{border:none}

Mã:

#blog-pager{clear:both;margin:30px auto;text-align:center;padding:7px}
.blog-pager{background:none}
.displaypageNum a,.showpage a,.pagecurrent{padding:5px 10px;margin-right:5px;color:#F4F4F4;background-color:#404042;-webkit-box-shadow:0 5px 3px -1px rgba(50,50,50,0.53);-moz-box-shadow:0 5px 3px -1px rgba(50,50,50,0.53);box-shadow:0 5px 3px -1px rgba(50,50,50,0.53)}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#EC8D04;text-decoration:none;color:#fff}
#blog-pager .showpage,#blog-pager,.pagecurrent{font-weight:bold;color:#000}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow:0 5px 3px -1px rgba(50,50,50,0.53);-moz-box-shadow:0 5px 3px -1px rgba(50,50,50,0.53);box-shadow:0 5px 3px -1px rgba(50,50,50,0.53)}

Mã: 

#blog-pager{clear:both;margin:30px auto;text-align:center;padding:7px}
.blog-pager{background:none}
.displaypageNum a,.showpage a,.pagecurrent{font-size:12px;padding:5px 12px;margin-right:5px;color:#222;background-color:#eee;border:1px solid #EEEEEE}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#E5E5E5;text-decoration:none;color:#222}
#blog-pager .pagecurrent{font-weight:bold;color:#fff;background:#DB4920}
.showpageOf{display:none!important}
#blog-pager .pages{border:none}

Các bạn có thể xem  thêm các mã khác tại đây hoặc sưu tâm ở các blog khác !
Nếu bạn muốn ẩn đi "First" and "Last" thì thêm đoạn code sau vào ngay SAU code CSS của style mà bạn chọn ở trên: .firstpage, .lastpage {display: none;}

Bước 4: Tìm đến thẻ </body> và dán đoạn code sau vào trước nó:

<b:if cond="data:blog.pageType != &quot;item&quot;">
<b:if cond="data:blog.pageType != &quot;static_page&quot;">
<script type="text/javascript">
  /*<![CDATA[*/
    var perPage=7;
    var numPages=6;
    var firstText ='First';
    var lastText ='Last';
    var prevText ='« Previous';
    var nextText ='Next »';
    var urlactivepage=location.href;
    var home_page="/";
  /*]]>*/
</script>
<script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"></script>
</b:if>
</b:if>

Bước 5 : Lưu mẫu và kiểm tra.

Lưu ý: Bạn sẽ gặp lỗi nếu hiển thị theo dạng label (nhãn bài đăng) bởi vì mặc định blogger thiết lập 20 bài viết trong mỗi trang khi bạn tìm theo label. Chúng ta sẽ thiết lập con số này nhỏ lại sao cho phù hợp với con số mà bạn đã thiết lập ở perPage.
- Tìm TẤT CẢ dòng code sau (nó ở nhiều vị trí): expr:href='data:label.url'

- Thay thế nó bằng dòng code: expr:href='data:label.url + "?&amp;max-results=7"'

- Ở đây bạn thay số 7 trong max-results=7 bằng con số mà bạn đã gán cho perPage ở trên.

- Lưu Mẫu lại và kiểm tra !