Tạo phân trang có đánh số cho blogger (bổ sung bước 9)


Tạo phân trang có đánh số cho blogger (bổ sung bước 9)

| 1.3.15 |

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ủaHelp Blogger. Bổ sung : Làm cho có tác dụng với nhãn trên thanh menu.

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

3 Bạ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

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

Thêm script CSS

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

<b:if cond="data:blog.pageType != &quot;item&quot;">
<b:if cond="data:blog.pageType != &quot;static_page&quot;">

  /**/

http://helplogger.googlecode.com/svn/trunk/page-navigation2.js
</b:if>
</b:if>

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í)

expr:href='data:label.url'

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

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.

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

9 (Bổ sung) 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

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
?&amp;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à
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.
Từ khoá tiếng Anh để tìm kiếm bài này : How to add numbered page navigation widget for blogger? Many beautiful styles of page navigation widget for blogger.

Biểu mẫu liên hệ

Tên
Email *
Thông báo *

Đăng ký nhận tin qua email

Giới thiệu

Math2IT là trang blog về Toán họcGiáo dụcCông nghệ. Mong muốn góp phần làm đổi mới nền giáo dục nước nhà. ► Đọc thêm

Google+ Followers

Lên đầu trang

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s