TẠO KHUNG PHÂN TRANG CÓ ĐÁNH SỐ CHO BLOGGER

Chào các bạn mặc định khi tạo blogger sơ khai thì chúng ta không có thanh tạo phân trang có đánh số như first, last, previous , next . Bài viết này hôm nay mình sẽ giới thiệu cho các bạn biết cách để hiển thị thanh phân trang cho blogger của chúng ta nhìn gọn, đẹp và thân thiện với người dùng hơn.

BƯỚC 1: THÊM CODE VÀO HTML 

Đầu tiên ta đăng nhập vào blogger của mình. chọn

1. Mẫu 

2. Chỉnh sửa HTML 

1. Tiếp đó ta click vào vào khung chứa HTML 

2. Nhấn phím CTRL+F lúc đó ta sẽ thấy xuất hiện ô search code.

3. Ta gõ vào ô search đó câu lệnh này  ]]></b:skin> 

    sau đó ta Past CODE ngay TRƯỚC câu lệnh này.

BƯỚC 2: CHỌN CODE

Có rất nhiều code cho ta lựa chọn như dưới đây:

Code 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 1: 

***************************************************************************

Code 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 2: 

***************************************************************************

Code 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 3: 

***************************************************************************

Code 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 4: 

***************************************************************************

Code 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 5: 

***************************************************************************

Code 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 6: 

***************************************************************************
Code 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;}

Style 7: 

BƯỚC 3: THÊM CODE FIRST , LAST, PREVIOUS, NEXT.

Như các bước  trên các bạn tìm đến ô search HTML tìm dòng lệnh  </body>

Sau đó past đoạn code này vô TRƯỚC dòng lệnh đó.

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

Tùy chỉnh code:

 var perPage: Có tất cả bao nhiêu bài viết được hiển thị trong 1 trang bạn load

 var numPages: Số lượng trang hiển thị trên thanh khung phân trang, mình thì mình chọn 123.

Nếu các bạn muốn ẩn“First” và “Last” đi thì thêm dòng code này ngay sau đoạn code ở bước3:

.firstpage, .lastpage {display: none;}

BƯỚC 4 : SỬA LỖI LABEL

Mặc định mỗi Blogger sẽ có 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à ta đã sửa ở var perPage .

 Ta vào khung tìm kiếm HTML như lúc đầu tìm đoạn code:

expr:href='data:label.url'

Sau đó ta thay thế đoạn code này bằng đoạn code sau:

expr:href='data:label.url + "?&max-results=7"'

Ta thấy con số max-results=7  Ta sửa con số 7 này bằng với con số mà ta đã sửa ở var perPage .

Và cuối cùng ta Lưu Mẫu để xem thành quả của mình nào.

**cảm ơn các bạn đã ghé thăm blogger của mình thường xuyên vô để cập nhập những tin tức bổ ích nhất nha**