Tạo phân trang có đánh số đẹp cho blogger

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. Bài viết sẽ giúp bạn tạo ra một phân trang như thế với sự hướng dẫn của Help Blogger.

Thêm CSS

1 Vào Blogger Dashboard > Template > Edit HTML

2 Click vào bất kỳ chỗ nào trong khung chỉnh sửa HTML > nhấn tổ hợp phím Ctrl + F để mở hộm tìm kiếm các câu lệnh

3Bạn tìm đến thẻ ]]></b:skin> và paste đoạn code style mà bạn muốn ngay TRƯỚC nó. Dưới đây là các style cho bạn lựa chọn.

Chọn style

Có rất nhiều style cho bạn lựa chọn, tùy theo giao diện blog của mình, bạn hãy chọn style cho phù hợp.

Style 1

1 2 3 4 5 6 7 8 9

#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

1 2 3 4 5 6 7 8 9

#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

1 2 3 4 5 6 7 8 9

#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

1 2 3 4 5 6 7 8 9

#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

1 2 3 4 5 6 7 8 9

#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

1 2 3 4 5 6 7 8 9

#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

1 2 3 4 5 6 7 8 9

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

1 2 3

.firstpage, .lastpage {display: none;}

Thêm script CSS

4 Tìm đến thẻ </body>  và dán đoạn code sau ngay TRƯỚC nó

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<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="https://thinot4work.github.io/files/page-navigation2.js"></script> </b:if> </b:if>

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

Tùy chỉnh

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

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

6 Tìm TẤT CẢ dòng code sau (nó ở nhiều vị trí)

1 2 3

expr:href='data:label.url'

7 Thay thế nó bằng dòng code sau

1 2 3

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.

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

9 Mình quên hướng dẫn các bạn cách làm cho việc khi nhấn vào “nhãn” (label) trên thanh menu bạn tự tạo, thì nó cũng phân trang giống vậy.  Ví dụ ở đây nhãn bài đăng của mình là “LaTeX“, nó sẽ có đường link như sau

1 2 3

http://math2it.blogspot.fr/search/label/LaTeX

Bạn cần vào chỉnh sửa Template thêm vào NGAY SAU CUỐI của đường link này đoạn sau

1 2 3

?&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. Blog của mình là 15. Tóm lại, link của nhãn LaTeX sau khi dán đoạn code trên vào hoàn chỉnh sẽ là

1 2 3

http://math2it.blogspot.fr/search/label/LaTeX?&max-results=7

Bạn cũng áp dụng cho tất cả các nhãn khác của bạn. Bạn có thể xem ví dụ khi nhấn vão từng nhãn bài đăng trong blog mình.