This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.
Author Image Saturday, 28 April 2018

[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
Comments:
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

  • Please wait while i am loading Facebook SDK js