Home Home » Thủ Thuật » Thủ Thuật Blogger » Phân Trang cho Blogspot

Phân Trang cho Blogspot

Thứ Bảy, 25 tháng 4, 2015

Phân trang cho Blogspot (Page Navigation) là một tiện ích được nhiều blog áp dụng nhằm tăng tính chuyên nghiệp cho trang blogspot của họ. Dưới đây mình sẽ hướng dẫn các bạn cách phân trang cho Blogspot và một số style phân trang đẹp.



Bước 1: Thêm code JavaScript phân trang

Đăng nhập Blog ~> Vào Mẫu ~> Chỉnh sửa HTML. Thêm đoạn code sau vào trước thẻ </body>

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


Lưu ý: 
postperpage=5; số bài viết hiển thị trên mỗi trang
numshowpage=5; số nút hiển thị trên thanh Navigation
Có thể thay &#171; Previous và Next &#187; thành từ bạn muốn

Bước 2: Một số style đẹp

Thêm 1 trong các đoạn code css sau vào trước thẻ ]]></b:skin> rồi Lưu Mẫu lại

Style 1:


<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi13wtFvLk56MdjRCqymGBFFR55zc6O2fKjSCiE0nSqQY4mZqmGki36cjuohrCASWhaEeXXqsRH2wVZ537OiQPTEFR9eIg6WRU6O8IAjm6S2W9nN6QEIi1C4OSviToCalo3mCUy6qgqA3c/s1600/yellow-butt.png) repeat-x;background-position:0px -43px;border:1px solid #FD6C02;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px; margin:0px 1px 0 1px;padding:3px 10px;color:#EEEEEE;line-height:30px;cursor:pointer;}.showpageNum a:hover,.showpage a:hover { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi13wtFvLk56MdjRCqymGBFFR55zc6O2fKjSCiE0nSqQY4mZqmGki36cjuohrCASWhaEeXXqsRH2wVZ537OiQPTEFR9eIg6WRU6O8IAjm6S2W9nN6QEIi1C4OSviToCalo3mCUy6qgqA3c/s1600/yellow-butt.png) repeat-x;background-position:-10px -43px; border:1px solid #FB5106;-webkit-border-radius:7px; -moz-border-radius:7px;border-radius:7px;color:#ffffff;-text-decoration:underline;}.showpageOf{margin:0 8px 0 0; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi13wtFvLk56MdjRCqymGBFFR55zc6O2fKjSCiE0nSqQY4mZqmGki36cjuohrCASWhaEeXXqsRH2wVZ537OiQPTEFR9eIg6WRU6O8IAjm6S2W9nN6QEIi1C4OSviToCalo3mCUy6qgqA3c/s1600/yellow-butt.png) repeat-x;background-position:0px -43px;border:1px solid #FD6C02;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;line-height:30px;padding:3px 10px;color:#ffffff;}.showpagePoint {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi13wtFvLk56MdjRCqymGBFFR55zc6O2fKjSCiE0nSqQY4mZqmGki36cjuohrCASWhaEeXXqsRH2wVZ537OiQPTEFR9eIg6WRU6O8IAjm6S2W9nN6QEIi1C4OSviToCalo3mCUy6qgqA3c/s1600/yellow-butt.png) repeat-x;background-position:-55px -43px;margin:0 3px 0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;border:1px solid #FB5106;-webkit-border-radius:7px; -moz-border-radius:7px;border-radius:7px;color:#FFFFFF;text-decoration:underline;font-weight:bold;} </style> <a href="http://bloggertrix.com/" target="_blank" title="Free Backlinks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdTzWFt6OSGa109WbCK9CP5iqP2LTTddYCyNHFprXTvrO6x4hlzNh9vvTbYUrfBX69o9GIyTRoEHIzN_jOMKs2CzNWwNEZgIX0ykZ4ngdwabd0ki6skqAgyQ9OUJARnGB__0qNfFmLhzs/s1600/page-number.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a> <script style='text/javascript'> var postperpage=5; var numshowpage=3; var upPageWord="Prev"; var downPageWord="Next"; var home_page="/"; var urlactivepage=location.href; </script> <script style='text/javascript' src='http://bloggertrix.googlecode.com/files/bloggertrix.js'></script>


Style 2:


<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3b6DjtSQm0yYN1RkMNW6cqxiuOWdfp4ZWphaN0T_0e4D-MJFYHeuTBSLXi3K3LZZhcUtc8eJ-88tooVesPu78OuRtzi8XZEhmzJNz2_h6xph-MiahPdwFMglBWRTA0ib6yfkKb57R4dY/s1600/greendiamond.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;margin:0px 1px 0 1px;padding:3px 10px;color:#EEE;line-height:30px;cursor:pointer;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);}.showpageNum a:hover,.showpage a:hover { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3b6DjtSQm0yYN1RkMNW6cqxiuOWdfp4ZWphaN0T_0e4D-MJFYHeuTBSLXi3K3LZZhcUtc8eJ-88tooVesPu78OuRtzi8XZEhmzJNz2_h6xph-MiahPdwFMglBWRTA0ib6yfkKb57R4dY/s1600/greendiamond.png) repeat-x;background-position:0px -30px; border:2px solid #006666;-webkit-border-radius:20px; -moz-border-radius:20px;border-radius:20px;color:#FFF;-text-decoration:underline;}.showpageOf{margin:0 8px 0 0; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3b6DjtSQm0yYN1RkMNW6cqxiuOWdfp4ZWphaN0T_0e4D-MJFYHeuTBSLXi3K3LZZhcUtc8eJ-88tooVesPu78OuRtzi8XZEhmzJNz2_h6xph-MiahPdwFMglBWRTA0ib6yfkKb57R4dY/s1600/greendiamond.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;line-height:30px;padding:3px 10px;color:#EEE;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);}.showpagePoint {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3b6DjtSQm0yYN1RkMNW6cqxiuOWdfp4ZWphaN0T_0e4D-MJFYHeuTBSLXi3K3LZZhcUtc8eJ-88tooVesPu78OuRtzi8XZEhmzJNz2_h6xph-MiahPdwFMglBWRTA0ib6yfkKb57R4dY/s1600/greendiamond.png) repeat-x;background-position:0px -30px;margin:0 3px 0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;border:2px solid #007777;-webkit-border-radius:20px; -moz-border-radius:20px;border-radius:20px;color:#EEE;text-decoration:underline;font-weight:bold;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);} </style> <a href="http://bloggertrix.com/" target="_blank" title="Free Backlinks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdTzWFt6OSGa109WbCK9CP5iqP2LTTddYCyNHFprXTvrO6x4hlzNh9vvTbYUrfBX69o9GIyTRoEHIzN_jOMKs2CzNWwNEZgIX0ykZ4ngdwabd0ki6skqAgyQ9OUJARnGB__0qNfFmLhzs/s1600/page-number.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a> <script style='text/javascript'> var postperpage=5; var numshowpage=3; var upPageWord="Prev"; var downPageWord="Next"; var home_page="/"; var urlactivepage=location.href; </script> <script style='text/javascript' src='http://bloggertrix.googlecode.com/files/bloggertrix.js'></script>


Style 3:


<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a { background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjhDneQndCxs4fgWIoTbo22peCm5LitqJ_-eZ-XodnGvrFYbNrhvuUxpFP-rL9KdnrvYu4yvZhNnAIsjVWpt_JY2MAgGW6PlS-l-vq90oWt9Q2PAPELtbykQIMOBWqHXlUjcF1bRrWiZs/s1600/darkblue.png) repeat-x; border:2px solid #5C8CFB;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px; margin:0px 1px 0 1px;padding:3px 10px;color:#FFF;line-height:30px;cursor:pointer;white-space:nowrap; }.showpageNum a:hover,.showpage a:hover { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjhDneQndCxs4fgWIoTbo22peCm5LitqJ_-eZ-XodnGvrFYbNrhvuUxpFP-rL9KdnrvYu4yvZhNnAIsjVWpt_JY2MAgGW6PlS-l-vq90oWt9Q2PAPELtbykQIMOBWqHXlUjcF1bRrWiZs/s1600/darkblue.png) repeat-x; border:2px solid #5C8CFB;-webkit-border-radius:7px; -moz-border-radius:7px;border-radius:7px;color:#e4905a;text-decoration:none; }.showpageOf{ margin:0 8px 0 0; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjhDneQndCxs4fgWIoTbo22peCm5LitqJ_-eZ-XodnGvrFYbNrhvuUxpFP-rL9KdnrvYu4yvZhNnAIsjVWpt_JY2MAgGW6PlS-l-vq90oWt9Q2PAPELtbykQIMOBWqHXlUjcF1bRrWiZs/s1600/darkblue.png) repeat-x;border:2px solid #5C8CFB;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px; line-height:30px;padding:3px 10px;color:#FFF; }.showpagePoint { background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjhDneQndCxs4fgWIoTbo22peCm5LitqJ_-eZ-XodnGvrFYbNrhvuUxpFP-rL9KdnrvYu4yvZhNnAIsjVWpt_JY2MAgGW6PlS-l-vq90oWt9Q2PAPELtbykQIMOBWqHXlUjcF1bRrWiZs/s1600/darkblue.png) repeat-x; margin:0 3px 0 3px;padding:3px 10px; line-height:30px;cursor:pointer;white-space:nowrap; border:2px solid #5C8CFF;-webkit-border-radius:7px; -moz-border-radius:7px;border-radius:7px;color:#e4905a;text-decoration:underline;font-weight:bold; } </style> <a href="http://bloggertrix.com/" target="_blank" title="Free Backlinks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdTzWFt6OSGa109WbCK9CP5iqP2LTTddYCyNHFprXTvrO6x4hlzNh9vvTbYUrfBX69o9GIyTRoEHIzN_jOMKs2CzNWwNEZgIX0ykZ4ngdwabd0ki6skqAgyQ9OUJARnGB__0qNfFmLhzs/s1600/page-number.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a> <script style='text/javascript'> var postperpage=5; var numshowpage=3; var upPageWord="Prev"; var downPageWord="Next"; var home_page="/"; var urlactivepage=location.href; </script> <script style='text/javascript' src='http://bloggertrix.googlecode.com/files/bloggertrix.js'></script>

Style 4:


 

.blog-pager,#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#fff}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCSChnqIRoYT8v1QT0qZTrus_Ev7YG4If9DUBsw1I5nerS4wdZge7U2xZnwHaSU944HSD2e5q554sOnH23n_WOMwR_8FGKOZhyphenhyphenT57kgDKsEermzdya7iHcU_P_6wgkCOUmeVR4wZzb8H8o/s75/wp5.jpg) 0 -50px repeat-x}.showpageNum a:hover{background:#666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCSChnqIRoYT8v1QT0qZTrus_Ev7YG4If9DUBsw1I5nerS4wdZge7U2xZnwHaSU944HSD2e5q554sOnH23n_WOMwR_8FGKOZhyphenhyphenT57kgDKsEermzdya7iHcU_P_6wgkCOUmeVR4wZzb8H8o/s75/wp5.jpg) 0 -25px repeat-x}.showpagePoint{color:#fff;padding:3px 8px;margin:2px;font-weight:700;background:#06a2b9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCSChnqIRoYT8v1QT0qZTrus_Ev7YG4If9DUBsw1I5nerS4wdZge7U2xZnwHaSU944HSD2e5q554sOnH23n_WOMwR_8FGKOZhyphenhyphenT57kgDKsEermzdya7iHcU_P_6wgkCOUmeVR4wZzb8H8o/s75/wp5.jpg) 0 0 repeat-x;text-decoration:none}.showpageOf{margin:0 5px 0 0}



Style 5:


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


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

Các bạn có thể sưu tầm nhiều Style ở các blog khác !

Nguồn: ST

Chia sẻ bài viết
Bài liên quan

Comments[ 0 ]


Đăng nhận xét

Xuống cuối trang