[Blogger] Hướng dẫn chèn phân trang cho blogspot

Phân trang bài viết áp dụng cho trang index, các trang search label, trang tìm kiếm,... Mặc định blogger cũng có cung cấp cho người dùng chức năng phân trang bài viết, tuy nhiên nó khá đơn giản, chỉ có một nút "sang trái" và một nút "sang phải". Điều này khá bất tiện đối với người đọc khi xem trang index có nhiều bài viết. Bài viết này sẽ giúp cho bạn có phân trang chuyên nghiệp hơn

1. Viết CSS

Có một vài style cho bạn lựa chọn, bạn dán chúng trước ]]></b:skin>

- 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:0 5px 3px -1px rgba(50,50,50,0.53);-moz-box-shadow:0 5px 3px -1px rgba(50,50,50,0.53);box-shadow:0 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:0 5px 3px -1px rgba(50,50,50,0.53);-moz-box-shadow:0 5px 3px -1px rgba(50,50,50,0.53);box-shadow:0 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}

2. Chèn code JS

Dán trước thẻ </body>

<b:if cond='!data:view.isSingleItem'>
<script type='text/javascript'>/*<![CDATA[*/
var perPage = 10,
    numPages = 5,
    firstText = '<i class="fa fa-angle-double-left"></i>',
    lastText = '<i class="fa fa-angle-double-right"></i>',
    prevText = '<i class="fa fa-angle-left"></i>',
    nextText = '<i class="fa fa-angle-right"></i>',
    urlactivepage = location.href,
    home_page = "/";
/*]]>*/
</script>
<script type='text/javascript'>//<![CDATA[
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('J 1i(e){f a="";V=T(13/2),V==13-V&&(13=2*V+1),C=i-V,C<1&&(C=1),9=T(e/k)+1,9-1==e/k&&(9-=1),K=C+13-1,K>9&&(K=9),a+="<4 5=\'1N\'>1H "+i+"/"+9+"</4>";f t=T(i)-1;i>1&&(a+="m"==h?\'<4 5="1k 1q"><a 6="\'+u+\'">\'+11+"</a></4>":\'<4 5="c 1q"><a 6="/o/w/\'+A+"?&7-j="+k+\'">\'+11+"</a></4>"),i>2&&(a+=3==i?"m"==h?\'<4 5="1k"><a 6="\'+u+\'">\'+Y+"</a></4>":\'<4 5="c"><a 6="/o/w/\'+A+"?&7-j="+k+\'">\'+Y+"</a></4>":"m"==h?\'<4 5="c"><a 6="#" v="L(\'+t+\');y x">\'+Y+"</a></4>":\'<4 5="c"><a 6="#" v="I(\'+t+\');y x">\'+Y+"</a></4>"),C>1&&(a+="m"==h?\'<4 5="c"><a 6="\'+u+\'">1</a></4>\':\'<4 5="c"><a 6="/o/w/\'+A+"?&7-j="+k+\'">1</a></4>\'),C>2&&(a+=" ... ");1j(f s=C;s<=K;s++)a+=i==s?\'<4 5="1L">\'+s+"</4>":1==s?"m"==h?\'<4 5="c"><a 6="\'+u+\'">1</a></4>\':\'<4 5="c"><a 6="/o/w/\'+A+"?&7-j="+k+\'">1</a></4>\':"m"==h?\'<4 5="c"><a 6="#" v="L(\'+s+\');y x">\'+s+"</a></4>":\'<4 5="c"><a 6="#" v="I(\'+s+\');y x">\'+s+"</a></4>";K<9-1&&(a+="...  "),K<9&&(a+="m"==h?\'<4 5="c"><a 6="#" v="L(\'+9+\');y x">\'+9+"</a></4>":\'<4 5="c"><a 6="#" v="I(\'+9+\');y x">\'+9+"</a></4>");f r=T(i)+1;i<9-1&&(a+="m"==h?\'<4 5="c"><a 6="#" v="L(\'+r+\');y x">\'+1b+"</a></4>":\'<4 5="c"><a 6="#" v="I(\'+r+\');y x">\'+1b+"</a></4>"),i<9&&(a+="m"==h?\'<4 5="c 1c"><a 6="#" v="L(\'+9+\');y x">\'+Z+"</a></4>":\'<4 5="c 1c"><a 6="#" v="I(\'+9+\');y x">\'+Z+"</a></4>");1j(f p=B.1x("1y"),n=B.1w("1B-1J"),l=0;l<p.X;l++)p[l].1h=a;p&&p.X>0&&(a=""),n&&(n.1h=a)}J 12(e){f a=e.1m,t=T(a.1K$1G.$t,10);1i(t)}J 1r(){f e=g;-1!=e.b("/o/w/")&&(A=-1!=e.b("?S-7")?e.Q(e.b("/o/w/")+14,e.b("?S-7")):e.Q(e.b("/o/w/")+14,e.b("?&7"))),-1==e.b(".1I")&&(-1==e.b("/o/w/")?(h="m",i=-1!=g.b("#D=")?g.Q(g.b("#D=")+8,g.X):1,-1==e.b("q=")?B.16(\'<d M="\'+u+\'P/N/O?7-j=1&H=F-G-d&E=12"></d>\'):B.16(\'<d M="\'+u+"P/N/O?q="+e.z("?")[1].z("q=")[1].z("&")[0]+\'&H=F-G-d&E=12"></d>\')):(h="w",-1==e.b("&7-j=")&&(k=1M),i=-1!=g.b("#D=")?g.Q(g.b("#D=")+8,g.X):1,B.16(\'<d M="\'+u+"P/N/O/-/"+A+\'?H=F-G-d&E=12&7-j=1" ></d>\')))}J L(e){U=(e-1)*k,R=e;f a=B.1d("1g")[0],t=B.1t("d");t.1s="1u/1v",-1==g.b("?q=")?t.17("M",u+"P/N/O?18-1a="+U+"&7-j=1&H=F-G-d&E=W"):t.17("M",u+"P/N/O?18-1a="+U+"&H=F-G-d&q="+g.z("?")[1].z("q=")[1].z("&")[0]+"&E=W"),a.1n(t)}J I(e){U=(e-1)*k,R=e;f a=B.1d("1g")[0],t=B.1t("d");t.1s="1u/1v",t.17("M",u+"P/N/O/-/"+A+"?18-1a="+U+"&7-j=1&H=F-G-d&E=W"),a.1n(t)}J W(e){15=e.1m.1E[0];f a=15.1l.$t.Q(0,19)+15.1l.$t.Q(1D,1z),t=1F(a);1o("m"==h)1o(-1==g.b("?q="))f s="/o?S-7="+t+"&7-j="+k+"#D="+R;1p f s="/o?S-7="+t+"&q="+g.z("?")[1].z("q=")[1].z("&")[0]+"&7-j="+k+"#D="+R;1p f s="/o/w/"+A+"?S-7="+t+"&7-j="+k+"#D="+R;1A.6=s}"1e"==1f 11&&(11="1C"),"1e"==1f Z&&(Z="1O");f R,h,i,A;1r();',62,113,'||||span|class|href|max||lastPageNo||indexOf|displaypageNum|script||var|urlactivepage|currentPage|currentPageNo|results|perPage||page||search||||||home_page|onclick|label|false|return|split|postLabel|document|pageStart|PageNo|callback|json|in|alt|redirectlabel|function|pageEnd|redirectpage|src|posts|summary|feeds|substring|noPage|updated|parseInt|jsonstart|pageNumber|finddatepost|length|prevText|lastText||firstText|totalcountdata|numPages||post|write|setAttribute|start||index|nextText|lastpage|getElementsByTagName|undefined|typeof|head|innerHTML|looppagecurrentg|for|showpage|published|feed|appendChild|if|else|firstpage|pagecurrentg|type|createElement|text|javascript|getElementById|getElementsByName|pageArea|29|location|blog|First|23|entry|encodeURIComponent|totalResults|Page|html|pager|openSearch|pagecurrent|20|showpageOf|Last'.split('|'),0,{}))
//]]></script>
</b:if>

Trong đó bạn có thể thay các biến perPage, numPages, firstText, lastText , prevText , nextText theo ý thích của mình nhưng quan trọng nhất là giá trị perPage. Giá trị này cần đặt trùng khớp với số bài đăng trong blog

Ví dụ của tôi để là 17 thì perPage cũng để là 17 thì mới phân trang đúng.

3. Label fix

Để phân trang đúng với trang tìm kiếm label bạn cần tìm tất cả code có dạng expr:href='data:label.url' và sửa thành expr:href='data:label.url + "?&amp;max-results=17"' trong đó giá trị 17 trùng với perPage của bạn.

Nếu bạn xây dựng menu theo label search thì bạn cũng cần sửa như sau: ví dụ bạn đặt liên kết là <a href="/search/label/Tips">Thủ thuật</a> thì sửa thành <a href="/search/label/Tips?&amp;max-results=17">Thủ thuật</a> Giá trị 17 cũng trùng với perPage để phân trang đúng

Hiện tại code phân trang trên chưa chính xác với trang tìm kiếm mặc định có dạng /search?q=key_word. Nên bạn có thể dùng thẻ điều kiện để trả nó về phân trang mặc định của blog

Thủ thuật đơn giản vậy thôi chúc bạn thành công nhé ! Để lại lời nhắn nếu không thực hiện được