Tạo Phân Trang Có Đánh Số Cho Blog

Mình đang làm blog, và tìm thấy cách tạo nút phân trang hay của Math2IT, mình muốn chia sẻ tới các bạn.

Theo mặc định của blogger và đ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 trang có đánh số cho người đọc dễ theo dõi và thao tác. 

Vì vậy, ta cần phải tạo phân trang để blog nhìn chuyên nghiệp hơn, nhất là đối với các blog có nhiều bài viết.

Bước 1: Vào trang blog→ tìm đến Mẫu ( template)→click chỉnh sửa HTML.

Tìm kiếm thẻ ]]></b:skin>.

Sau đó paste 1 trong các code phía sau ngay trên nó.

Style 1:

#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;}  

Style 2:

#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: 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);}
.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: 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:

#blog-pager{clear:both;margin:30px auto; padding: 7px; 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;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{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;}
.showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}
a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}
#blog-pager .pages{border:none;background: none;}  

Style 4:

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

Style 5:

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}
#blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}  

Style 6:

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

Style 7:

#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;}  

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 2: Tìm đến thẻ </body>  và dán đoạn code sau ngay 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=3;
    var firstText ='First';
    var lastText ='Last';
    var prevText ='« Previous';
    var nextText ='Next »';
    var urlactivepage=location.href;
    var home_page="/";
  /*]]>*/
</script>
<script src="https://thinot4work.github.io/files/page-navigation2.js></script>
</b:if>
</b:if>  

Sau đó ấn lưu mẫu là xong.

[Update] Nếu đường link  http://thinot4work....page-navigation2.js bị lỗi, bạn có thể download filepage-navigation2.js  thay thế ở link này. Lưu ý, sau khi download file này về máy rồi, bạn cần upload nó lên một trang host nào đó cho phép up file javascript, rồi bạn dẫn link mới đến file page-navigation2.js và thay thế link đã bị hỏng ở trên.

Tuy nhiên nếu bạn nào không muốn up lên trang host bất kỳ nào thì có thể thêm luôn vào mẫu của mình đoạn code trong file .js trên, được hướng dẫn đầy đủ trong bài viết khác của mình tại ĐÂY. (ps: chính mình đang sử dụng cách này)

Bước 3: Chỉnh sửa đồng bộ với blog 

Trong đoạn code trên có một số chỗ bạn có thể chỉnh lại sao cho phù hợp với blog mình nhất:

perPage: có bao nhiêu bài viết sẽ được hiện ở trong mỗi trang, mặc định là 7. Bạn chỉnh lại sao cho phù hợp với số lượng bài viết mà bạn đã thiết lập trong Cài Đặt của blog mình.

numPages: số lượng trang sẽ hiện trên thanh navigation (ở blog của mình, mình chọn số 3 và kết quả hiện thị là 123..5)

Thay các chữ “First“, “Last“, “Previous“, “Next” bằng các từ mà bạn mong muốn.

Sau đó nhấn Save template.

Labels fix

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'  

Sữa thành:

expr:href='data:label.url + "?&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

Save template lại và tận hưởng thành quả

Thay đổi lại “nhãn” (label) trên thanh menu bạn tự tạo, ở đây nó cũng phân trang giống vậy.  Ví dụ ở đây nhãn bài đăng của mình là “Blogspot“, trước khi tạo phân trang nó sẽ có đường link như sau:

https://phanmemhay24.blogspot.com/search/label/Blogspot

Thêm vào: ?&amp;max-results=7 sửa thành

https://phanmemhay24.blogspot.com/search/label/Blogspot?&max-results=7 

Ở đây, cũng thay số 7 bằng con số bài đăng trên mỗi trang mà ở các bước trước bạn đã định.
Bạn áp dụng cho tất cả các nhãn của mình.

Nếu sau khi làm tất cả các điều trên, bạn thấy blog cuẩ mình bị lỗi hiện số lượng bài viết không giống với cài đặt của bạn. Mời các bạn đọc bài về Cách khắc phục lỗi hiện số bài viết trong blog tại ĐÂY.
Chúc các bạn thành công!