» Hướng dẫn các tạo phân trang có đánh số cho Blogger

Hướng dẫn các tạo phân trang có đánh số cho Blogger

Mặc định, Blogger cũng có tính năng phân trang bài viết đó là button Bài đăng cũ hơn và Bài đăng mới hơn. Song, mẫu phân trang mặc định của Blogger có vẻ không thân thiện với người dùng cho lắm, đặc biệt là với các Blog có số lượng bài viết lớn .Trong bài viết này, mình sẽ hướng dẫn các bạn tạo phân trang có đánh số cho Blogger. Đây là một trong những widget khá phổ biến, được sử dụng ở rất nhiều Blog, nó giúp bạn đọc có thể di chuyển giữa các trang một cách dễ dàng hơn


Bước 1 : Chèn đoạn code dưới đây vào trên thẻ đóng </body>

<script style='text/javascript'>
var postperpage=7;
var numshowpage=3;
var upPageWord=&quot;Prev&quot;;
var downPageWord=&quot;Next&quot;;
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
</script>
<script style='text/javascript'/>
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}('7 L;7 j;7 h;7 v;1A();H 1z(1d){7 6=\'\';M=K(12/2);5(M==12-M){12=M*2+1}C=h-M;5(C<1)C=1;e=K(1d/m)+1;5(e-1==1d/m)e=e-1;D=C+12-1;5(D>e)D=e;6+="<4 9=\'1M\'>1L "+h+\' 1Y \'+e+"</4>";7 17=K(h)-1;5(h>1){5(h==2){5(j=="u"){6+=\'<4 9="1Z"><a b="\'+B+\'">\'+S+\'</a></4>\'}c{6+=\'<4 9="g"><a b="/r/s/\'+v+\'?&d-l=\'+m+\'">\'+S+\'</a></4>\'}}c{5(j=="u"){6+=\'<4 9="g"><a b="#" y="N(\'+17+\');x w">\'+S+\'</a></4>\'}c{6+=\'<4 9="g"><a b="#" y="O(\'+17+\');x w">\'+S+\'</a></4>\'}}}5(C>1){5(j=="u"){6+=\'<4 9="g"><a b="\'+B+\'">1</a></4>\'}c{6+=\'<4 9="g"><a b="/r/s/\'+v+\'?&d-l=\'+m+\'">1</a></4>\'}}5(C>2){6+=\' ... \'}1s(7 k=C;k<=D;k++){5(h==k){6+=\'<4 9="24">\'+k+\'</4>\'}c 5(k==1){5(j=="u"){6+=\'<4 9="g"><a b="\'+B+\'">1</a></4>\'}c{6+=\'<4 9="g"><a b="/r/s/\'+v+\'?&d-l=\'+m+\'">1</a></4>\'}}c{5(j=="u"){6+=\'<4 9="g"><a b="#" y="N(\'+k+\');x w">\'+k+\'</a></4>\'}c{6+=\'<4 9="g"><a b="#" y="O(\'+k+\');x w">\'+k+\'</a></4>\'}}}5(D<e-1){6+=\'...\'}5(D<e){5(j=="u"){6+=\'<4 9="g"><a b="#" y="N(\'+e+\');x w">\'+e+\'</a></4>\'}c{6+=\'<4 9="g"><a b="#" y="O(\'+e+\');x w">\'+e+\'</a></4>\'}}7 16=K(h)+1;5(h<e){5(j=="u"){6+=\'<4 9="g"><a b="#" y="N(\'+16+\');x w">\'+1l+\'</a></4>\'}c{6+=\'<4 9="g"><a b="#" y="O(\'+16+\');x w">\'+1l+\'</a></4>\'}}6+=\'<1q><a b="1n://1O.1K.1m" 1R="1Q 1S" 1D="1E-1F: 1I; 1G: 1H; 1N: 2d;" 28="27"><1o 26="0" J="1n://2a.2b.1m/1o/2f.2e" 1T="3" 2c="3" /></a></1q>\';7 E=z.1W("E");7 18=z.1V("1U-1X");1s(7 p=0;p<E.Q;p++){E[p].1i=6}5(E&&E.Q>0){6=\'\'}5(18){18.1i=6}}H 1f(X){7 Y=X.Y;7 1C=K(Y.22$21.$t,10);1z(1C)}H 1A(){7 i=o;5(i.f("/r/s/")!=-1){5(i.f("?V-d")!=-1){v=i.I(i.f("/r/s/")+14,i.f("?V-d"))}c{v=i.I(i.f("/r/s/")+14,i.f("?&d"))}}5(i.f("?q=")==-1&&i.f(".6")==-1){5(i.f("/r/s/")==-1){j="u";5(o.f("#G=")!=-1){h=o.I(o.f("#G=")+8,o.Q)}c{h=1}z.1p("<n J=\\""+B+"P/R/U?d-l=1&13=15-Z-n&T=1f\\"><\\/n>")}c{j="s";5(i.f("&d-l=")==-1){m=20}5(o.f("#G=")!=-1){h=o.I(o.f("#G=")+8,o.Q)}c{h=1}z.1p(\'<n J="\'+B+\'P/R/U/-/\'+v+\'?13=15-Z-n&T=1f&d-l=1" ><\\/n>\')}}}H N(F){11=(F-1)*m;L=F;7 W=z.1r(\'1g\')[0];7 A=z.1w(\'n\');A.1t=\'1v/1u\';A.1y("J",B+"P/R/U?1B-1j="+11+"&d-l=1&13=15-Z-n&T=1e");W.1h(A)}H O(F){11=(F-1)*m;L=F;7 W=z.1r(\'1g\')[0];7 A=z.1w(\'n\');A.1t=\'1v/1u\';A.1y("J",B+"P/R/U/-/"+v+"?1B-1j="+11+"&d-l=1&13=15-Z-n&T=1e");W.1h(A)}H 1e(X){1c=X.Y.25[0];7 1x=1c.1k.$t.I(0,19)+1c.1k.$t.I(23,29);7 1a=1P(1x);5(j=="u"){7 1b="/r?V-d="+1a+"&d-l="+m+"#G="+L}c{7 1b="/r/s/"+v+"?V-d="+1a+"&d-l="+m+"#G="+L}1J.b=1b}',62,140,'||||span|if|html|var||class||href|else|max|maksimal|indexOf|showpageNum|nomerhal|thisUrl|jenis|jj|results|postperpage|script|urlactivepage|||search|label||page|lblname1|false|return|onclick|document|newInclude|home_page|mulai|akhir|pageArea|numberpage|PageNo|function|substring|src|parseInt|nopage|nomerkiri|redirectpage|redirectlabel|feeds|length|posts|upPageWord|callback|summary|updated|nBody|root|feed|in||jsonstart|numshowpage|alt||json|nextnomer|prevnomer|blogPager||timestamp|alamat|post|banyakdata|finddatepost|hitungtotaldata|head|appendChild|innerHTML|index|published|downPageWord|com|http|img|write|div|getElementsByTagName|for|type|javascript|text|createElement|timestamp1|setAttribute|loophalaman|halamanblogger|start|totaldata|style|font|size|float|right|7pt|location|blogspot|Page|showpageOf|padding|24work|encodeURIComponent|Blogger|title|Templates|width|blog|getElementById|getElementsByName|pager|of|showpage||totalResults|openSearch||showpagePoint|entry|border|_blank|target||img1|blogblog|height|2px|gif|blank'.split('|'),0,{}))
</script>

trong đó
  • var postperpage : Số bài viết trên một trang
  • var numshowpage : Số trang sẽ hiển thị
  • var upPageWord : Kí tự trở về trang trước
  • var downPageWord : Kí tự sang trang sau

Bước 2 : Thêm đoạn code dưới đây vào phía dưới <head>

<link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'/>

Chúng ta sẽ thêm đoạn code trên vì mình sẽ sử dụng font Roboto trong mẫu này. Nếu các bạn muốn sử dụng font chữ mặc định của giao diện thì không cần thêm

Bước 3 : Chèn đoạn code sau vào phía trên ]]></b:skin>. Các bạn có thể chọn một trong các mẫu sau để sử dụng cho Blog


.blog-pager,#blog-pager{display:inline-block;margin:0;overflow:inherit;color:#fff;height:40px;font-family:Roboto;border:1px solid #CED9EE;border-right:none;color:#617083}
#blog-pager a,.showpagePoint,.showpageOf{text-decoration:none;display:block;padding:0 18px;color:#55A8FD}
.showpageOf,.showpagePoint,.showpageNum,.showpage{line-height:40px;float:left;font-size:14px;border-right:1px solid #CED9EE}


.blog-pager,#blog-pager{display:inline-block;margin:0;overflow:inherit;color:#fff;height:30px;font-family:Roboto}
#blog-pager a,.showpagePoint,.showpageOf{color:#fff;text-decoration:none;display:block;padding:0 18px}
.showpageOf,.showpagePoint,.showpageNum,.showpage{line-height:30px;float:left;background-color:#ea5745;margin-right:10px;border-radius:2px;font-size:14px;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s}
.showpagePoint:hover,.showpageNum:hover,.showpage:hover{background-color:#ed8477;-moz-box-shadow:inset 0 0 1px #ea5745;-webkit-box-shadow:inset 0 0 1px #ea5745;box-shadow:inset 0 0 1px #ea5745}

.blog-pager,#blog-pager{display:inline-block;margin:0;overflow:inherit;color:#fff;height:30px;font-family:Roboto}
#blog-pager a,.showpagePoint,.showpageOf{color:#fff;text-decoration:none;display:block;padding:0 18px}
.showpageOf,.showpagePoint,.showpageNum,.showpage{line-height:30px;display:inline-block;background:#A1D0DD;margin-right:10px;border-radius:4px;-webkit-box-shadow:0 4px 0 #7FAFBC;-moz-box-shadow:0 4px 0 #7FAFBC;box-shadow:0 4px 0 #7FAFBC;font-size:14px;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s}
.showpagePoint:hover,.showpageNum:hover,.showpage:hover{position:relative;top:2px;-webkit-box-shadow:0 2px 0 #7FAFBC;-moz-box-shadow:0 2px 0 #7FAFBC;box-shadow:0 2px 0 #7FAFBC}

Chúc các bạn thành công.