Tạo phân trang cho blogspot (Blogger) Version 1

Bạn cảm thấy rất nhầm chán với Code phân trang mặc định của Blogger? Có nghĩa nó chỉ hiện thị "Older Posts" (Bài đăng cũ hơn) hay "Newer Posts" (Bài đăng mới hơn) chứ không tạo ra phân trang đánh số. Việc tạo phân trang sẽ giúp cho độc giả có thể theo dõi một bài viết ở những trang bất kỳ mà không phải mất công ấn bấm nhiều lần nút "Older Posts" (Bài đăng cũ hơn) hay "Newer Posts" (Bài đăng mới hơn) tăng trải nghiệm người dùng khi vào Blog/Website của bạn
Tạo phân trang cho blogspot (Blogger) Version 1

Tạo một phân trang Navigation đẹp sẽ làm cho Blog/Website bạn trở nên chuyên nghiệp hơn. Tuy nhiên để phù hợp với các mẫu Blogs khác nhau, nên Windows2it đưa ra 7 phong cách cho các bạn lựa chọn… Hứa hẹn sẽ có 7 phong cách mới ở Version 2.

Đọc thêm:



☼ Bắt đầu thủ thuật

Bước 1: Đầu tiên các bạn vào Blog => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm kiếm ]]></b:skin>. Sau đó paste đoạn code style mà bạn muốn lên trên thẻ ]]></b:skin>. Dưới đây là 7 style cho bạn lựa chọn.

Style 1:
Tạo phân trang cho blogspot 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:
Tạo phân trang cho blogspot 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:
Tạo phân trang cho blogspot 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:
Tạo phân trang cho blogspot 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:
Tạo phân trang cho blogspot 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:
Tạo phân trang cho blogspot 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:
Tạo phân trang cho blogspot 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;}  
Bước 2: Tiếp đó nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </body>. Sau đó dán đoạn mã Code sau ở phía trên thẻ </body>Lưu mẫu. <Việc cài đặt Code phân trang cho Blog/Website vậy là xong>
<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=15;
    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://cdn.rawgit.com/quangmen93/shareCount/master/page-navigation-1.js"></script>
</b:if>
</b:if 
Bước 3: Tạm gọi là phân trang đồng bộ cho Blog/website của bạn

>> 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 + "?&amp;max-results=15"'  
>> Tạo phân trang cho nhãn (label) trên thanh menu bạn tự tạo, thì nó cũng phân trang giống như vậy. Ví dụ: Ở đây nhãn bài đăng của mình là "thu-thuat-blogspot” nó sẽ có đường link như sau:

http://www.windows2it.com/search/label/thu-thuat-blogspot  
Sữa thành:

http://www.windows2it.com/search/label/thu-thuat-blogspot?&max-results=15
Vậy việc tạo phân trang cho Blog/Website của bạn đã hoàn thành. Nhưng nếu phân trang của bạn lại không hiển thị đủ bài viết trên một. Bạn nên đọc thêm bài này:


☼ Tùy chỉnh

·        perPage và ?&max-results=: Có bao nhiêu bài viết được hiển thị ở mỗi trang, mặc định là 15.

·        numPages: Số lượng trang sẽ hiển thị trên thanh navigation (Ví dụ: Nếu bạn chọn số 3 và kết quả hiển thị là 1| 2| 3 ... 5)

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

·        Nếu bạn muốn ẩn đi "First" và "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;}

☼ Kết luận

·        Vì tiện ích này vô cùng đơn giản nên mình không để Demo ngoài, chỉ để Demo bằng hình ảnh mình đã chụp lại.

·        Sử dụng các đoạn CSS và đoạn Scipts mở (chưa mã hóa - endcode) nên việc tùy biến rất dễ dàng.

·        Hứa hẹn ở Version 2 sẽ có nhiều phong cách hơn cho các bạn lựa chọn.

Nguồn: Helplogger


Còn bạn muốn Support gì thì cứ để lại comment @!

Liên hệ đặt quảng cáo
Quảng cáo trên windows2it.com

About Quang Mến :

Tôi là Quang Mến. Tôi viết blog theo phong cách chuyên nghiệp. ^^! Dựa trên niềm đam mê học hỏi và mong muốn chia sẽ với mọi người @@!
Theo dõi tôi trên:
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

40 nhận xét:

  1. Blog bạn viết dễ hiểu quá, ngay lúc đàu tìm được thì khoẻ

    ReplyDelete
  2. Anh ơi, em không biết thủ thuật này (hay thủ thuật tạo thông báo cho Blogspot) có code nào ảnh hưởng đến Slide ảnh hay không mà khi em cài rồi (cả hai) thì Slide ảnh không hoạt đông nữa. Như hiện giờ nè anh http://vochihieubl.blogspot.com/#
    Em cũng thử xóa cả hai để kiểm tra lại mà Slide vẫn không hoạt động.
    Anh giúp em với. :((

    ReplyDelete
    Replies
    1. Vậy chắc do lúc bạn up template có vấn đề .... Bạn up lại template xem sao ... Và chú ý thử slide của bạn có hoạt động ko ??? ,,,,

      Delete
    2. Em sửa được rồi anh. Lí do là em đưa cả đoạn code màu đỏ trong bài viết "Tự động thêm thuộc tính Nofollow và _blank cho liên kết ngoài (Link Out) trong Blogspot". Em kiểm tra lại hết và xóa đoạn đó thử thì oke.
      Cảm ơn anh.

      Delete
    3. Nói như bạn thì lỗi đó do sung đọt JS gây ra ... (Do thừ thư viện jQuery). Nesey BLog bạn đã có thư viện jQuery thì khi thực hiện thủ thuật bạn bỏ qua thư viện jQuery này là được :)

      Delete
  3. Blospot của e lấy theme của mấy trang free , bị lỗi phân trang ko biêt1 sửa sao . Mong bác chỉ giáo . Trag cua e la giaoluuhoctapcap3.blogspot.com , cảm ơn bác

    ReplyDelete
    Replies
    1. Mình đã kiểm tra nhưng không thấy lỗi gì ... Bạn có thể nói rõ lỗi mà bạn gặp phải được ko. Để mình giúp bạn nhanh hơn :)

      Delete
    2. bạn mở trang thứ 2 thì lại hiển thị những bài đăng trang thứ 1 bạn ạ , có cách nào khắc phục ko ạ

      Delete
    3. Lỗi này mình có một bài viết hướng dẫn cách khắc phục rồi bạn xem ở đây nhé !
      http://www.windows2it.com/2015/09/khac-phuc-loi-khong-phan-trang-cho-blogspot-blogger.html .. Không hiểu gì thì cứ để lại comment

      Delete
  4. Giờ là 2016 rồi :( http://helplogger.googlecode.com/svn/trunk/page-navigation2.js hết hoạt động luôn rồi. làm như bạn không thành công sao ý :(

    ReplyDelete
    Replies
    1. Đã cập nhật lại đoạn JS rùi bạn cứ vô tư đi nhé ! :)

      Delete
  5. Mình rất thích phần comment của bạn :) ! Có thể cho mình xin được không ạ? Tks bạn :)

    ReplyDelete
  6. Phải cảm ơn ngay vì bài viết dễ hiểu quá! Cảm ơn nhiều ạ!

    ReplyDelete
  7. Admin sao mình thêm như adm bảo rồi vẫn k dc vẫn cái giao diện phân trang cũ

    ReplyDelete
    Replies
    1. Sao lại khóa rùi ,,, mình truy cập vô Bạn ko được !!!

      Delete
  8. đang bảo trì adm ạ
    admin liên hệ qua fb bạn ý nhé : https://www.facebook.com/Trang.HoaCung.996

    ReplyDelete
  9. Bạn ơi giúp mình sửa lỗi khi click vào hình ảnh ở trang html >< trang item ấy thì hiển thị 1 slide ảnh gồm tất cả các ảnh trong bài viết đó >< như của bạn ấy . Mình cảm ơn nhiều !!!

    ReplyDelete
  10. bẠN ƠI, mình làm giống bạn nhưng mà sau khi chia thì không thấy nút next của thanh, và mất bài, bạn fix lỗi giúp mình được không, bằng teamview càng tốt

    ReplyDelete
    Replies
    1. - Blog bạn viết bao nhiêu bài rồi ???
      - Bạn muốn thị bao nhiêu bài trên một trang ???
      >>> Mất bài là đều rất rất là vô lý, thủ thuật chỉ tạo phân trang làm gì có dụ mất bài ở đây. Blog bạn đâu show mình qua thế nào, chứ bạn nói vậy thì chỉ có thể giúp bạn bằng niềm tin :P

      Delete
  11. bác cho e hỏi e làm theo hướng dẫn của bác mà của e sao không hiển thị phân trang bác nhỉ
    http://www.tinhduchoc.net/search/label/y%E1%BA%BFu%20sinh%20l%C3%BD?&max-results=15

    ReplyDelete
    Replies
    1. Bạn chưa thực thủ thuật làm sao giúp bạn được !!

      Delete
  12. Cảm ơn. http://www.linhkienhuynet.com CUNG CẤP LINH KIỆN VI TÍNH GIÁ RẺ HUY NET

    ReplyDelete
  13. Bác cho e hỏi, trang của e đã phân trang, nhưng khi nhấn vào các trang số 2-3, thì bài viết có thay đổi, nhưng vị trí phân trang vẫn ở vị trí số 1.
    Giả dụ e muốn qua trang số 4-5 thì chịu chết, nút >> của e cũng k hoạt động.
    www.mphim2t.tk
    Template đc chia sẻ trên mạng bác ạ.

    ReplyDelete
    Replies
    1. Mình đã vô kiểm tra phân trang của bạn hoạt động rất tốt ... mình đã kiểm tra tới phân trang số 7--các bài đều thay đổi mà bạn--

      Delete
  14. a ơi a có nhận là phân trang này không e làm mãi mà không được

    ReplyDelete
    Replies
    1. Bạn để lại tài facebook mình hướng dẫn cho !

      Delete
  15. úp lại link srcipt của google đi ad

    ReplyDelete
  16. úp lại link srcipt của google đi ad

    ReplyDelete
  17. Em đã làm nhưng vẫn không được anh ơi, đúng thứ tự xong đến bước 2 rồi nhưng trang chủ vẫn không phân trang như Style 7, anh giúp e với

    ReplyDelete
  18. a ơi giúp em với ak em muốn tạo 1 blog đọc truyện nhưng mà em đang có tí vấn đề là VÍ DỤ em post truyện HARRY POTTER nhưng mà nó lại có 18 chương truyện em toàn phải post hết lên rồi mới liên kết lại lúc vào trang chủ thì thấy 1 đống các chương em đã post vậy anh có cách nào mà post truyện nó vào 1 bài viết duy nhất không ak em cảm ơn trước

    ReplyDelete
  19. minh moi tao blog, minh tao phan trang ma no khong hien ra, ban giup minh coi thu voi TOICAIWINDAO.BLOGSPOT.COM
    tks bn trc nhe!

    ReplyDelete
    Replies
    1. file JS bị lỗi ... Mình mới cập nhật lại file JS .... Bạn cập nhật file JS lại là oke nha :)

      Delete
    2. hay wa! duoc r, cam on ban nhieu nha

      Delete
  20. mình sửa đường link phân trang nhãn dán nó bị lỗi

    ReplyDelete
  21. blog mình phân trang được ở trang chủ nhưng lại ko phân trang được ở các nhãn mong được giúp đở http://websitebatdongsan368.blogspot.com

    ReplyDelete