Tạo phân trang đẹp cho Blogspot phần 1

Tạo phân trang đẹp cho Blogspot phần 1
Phân trang thì có rất nhiều kiểu loại mẫu mã.Nhiều cách bố trí cài đặt ví dụ như áp dụng theo cách chỉnh sửa HTML trong template hay là thêm một tiện ích.Để đơn giản cho việc cài đặt cũng như dỡ bỏ khi cần thiết ở đây ta chỉ cần thêm một tiện ích và dán code vào là xong.
Làm thế nào để áp dụng vào Blog
Để tạo phân trang đẹp cho blogspot các bạn tiến hành theo các bước dưới đây:
1- Đăng nhập Blog
2- Chọn thêm tiện ích
3- Chọn 1 trong các mẫu dưới đây cùng với code tương ứng
4- Dán code vô khung tiện ích và click lưu lại
Chú ý nên để tiện ích này ngay dưới khung chỉnh sửa bài viết trong phần bố cục

Mẫu 1
/* Phần CSS */
<style type="text/css">#blog-pager{clear:both;margin:20px 0 20px;font-size: 12px;padding:10px 0;}#blog-pager-newer-link{float: left;}#blog-pager-older-link{float: right;}.Profile img{border:3px solid;float:left;margin:5px 10px 5px 0;padding:2;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.profile-data{color:#999999;font:bold 20px/1.6em Arial,Helvetica,Tahoma,sans-serif;font-variant:small-caps;margin:0;text-transform:capitalize;}.profile-datablock{margin:0.5em 0;}.profile-textblock{line-height:1.6em;margin:0.5em 0;}a.profile-link{clear:both;display:block;font:80% monospace;padding:10px 0;text-align:center;text-transform:capitalize;}h2.date-header, .PageList h2{display:none;}#blog-pager-older-link a,#blog-pager-newer-link a,a.home-link,.showpageNum a,.showpage a{background: url(https://lh4.googleusercontent.com/-1wuhDWcQiDk/UU8dhj9cRgI/AAAAAAAAT0k/_7g6VhAI3Ns/s26/nav.jpg) repeat-x;border:1px solid #ae4402;color:#fff;margin:2px;padding:6px 10px 5px;text-decoration:none;text-shadow: 1px 0 1px #000;}#blog-pager-older-link a:hover,#blog-pager-newer-link a:hover,a.home-link:hover,.showpageOf,.showpagePoint,.showpageNum a:hover,.showpage a:hover{background: url(https://lh3.googleusercontent.com/-SPOGNwpFqmE/UU8dhpKjpzI/AAAAAAAAT0o/Ka7AM9Syc-s/s26/nava2.jpg) repeat-x;border:1px solid #000000;color:#fff;margin:2px;padding:6px 10px 5px;text-shadow: 1px 0 1px #000;} </style> 
/* Phần javascript */
<script type='text/javascript'>
var postperpage=5;
var numshowpage=5;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</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}('E 17(a){c e="";H=G(S/2),H==S-H&&(S=2*H+1),z=d-H,z<1&&(z=1),b=G(a/i)+1,b-1==a/i&&(b-=1),D=z+S-1,D>b&&(D=b),e+="<3 4=\'1C\'>1W "+d+" 22 "+b+"</3>";c s=G(d)-1;d>1&&(e+=2==d?"j"==f?\'<3 4="1L"><a 5="\'+A+\'">\'+R+"</a></3>":\'<3 4="9"><a 5="/k/o/\'+y+"?&6-h="+i+\'">\'+R+"</a></3>":"j"==f?\'<3 4="9"><a 5="#" u="I(\'+s+\');w v">\'+R+"</a></3>":\'<3 4="9"><a 5="#" u="J(\'+s+\');w v">\'+R+"</a></3>"),z>1&&(e+="j"==f?\'<3 4="9"><a 5="\'+A+\'">1</a></3>\':\'<3 4="9"><a 5="/k/o/\'+y+"?&6-h="+i+\'">1</a></3>\'),z>2&&(e+=" ... ");18(c r=z;r<=D;r++)e+=d==r?\'<3 4="1Q">\'+r+"</3>":1==r?"j"==f?\'<3 4="9"><a 5="\'+A+\'">1</a></3>\':\'<3 4="9"><a 5="/k/o/\'+y+"?&6-h="+i+\'">1</a></3>\':"j"==f?\'<3 4="9"><a 5="#" u="I(\'+r+\');w v">\'+r+"</a></3>":\'<3 4="9"><a 5="#" u="J(\'+r+\');w v">\'+r+"</a></3>";D<b-1&&(e+="..."),D<b&&(e+="j"==f?\'<3 4="9"><a 5="#" u="I(\'+b+\');w v">\'+b+"</a></3>":\'<3 4="9"><a 5="#" u="J(\'+b+\');w v">\'+b+"</a></3>");c n=G(d)+1;d<b&&(e+="j"==f?\'<3 4="9"><a 5="#" u="I(\'+n+\');w v">\'+11+"</a></3>":\'<3 4="9"><a 5="#" u="J(\'+n+\');w v">\'+11+"</a></3>"),e+=\'<15><a 5="12://1B.1A.1b" 1F="1I" 1H="1z-1J: 1x; 1s: 1q; 1p: 1u;" 1y="1w"><1a 1v="0" K="12://1E.1T.1b/1a/1V.1Y" 1K="1" 24="1" /></a></15>\';18(c t=x.21("1Z"),l=x.1U("1N-1M"),p=0;p<t.M;p++)t[p].16=e;t&&t.M>0&&(e=""),l&&(l.16=e)}E Y(a){c e=a.1k;17(G(e.1P$1S.$t,10))}E 1c(){c a=m;-1!=a.7("/k/o/")&&(y=-1!=a.7("?U-6")?a.C(a.7("/k/o/")+14,a.7("?U-6")):a.C(a.7("/k/o/")+14,a.7("?&6"))),-1==a.7("?q=")&&-1==a.7(".1R")&&(-1==a.7("/k/o/")?(f="j",d=-1!=m.7("#B=")?m.C(m.7("#B=")+8,m.M):1,x.13(\'<g K="\'+A+\'O/P/Q?6-h=1&N=T-W-g&V=Y"><\\/g>\')):(f="o",-1==a.7("&6-h=")&&(i=20),d=-1!=m.7("#B=")?m.C(m.7("#B=")+8,m.M):1,x.13(\'<g K="\'+A+"O/P/Q/-/"+y+\'?N=T-W-g&V=Y&6-h=1" ><\\/g>\')))}E I(a){L=(a-1)*i,F=a;c e=x.1i("1d")[0],s=x.1l("g");s.1n="1m/1o",s.1j("K",A+"O/P/Q?1f-1e="+L+"&6-h=1&N=T-W-g&V=Z"),e.1g(s)}E J(a){L=(a-1)*i,F=a;c e=x.1i("1d")[0],s=x.1l("g");s.1n="1m/1o",s.1j("K",A+"O/P/Q/-/"+y+"?1f-1e="+L+"&6-h=1&N=T-W-g&V=Z"),e.1g(s)}E Z(a){X=a.1k.1O[0];c e=X.1h.$t.C(0,19)+X.1h.$t.C(23,1X),s=1r(e);1G("j"==f)r="/k?U-6="+s+"&6-h="+i+"#B="+F;1D c r="/k/o/"+y+"?U-6="+s+"&6-h="+i+"#B="+F;1t.5=r}c F,f,d,y;1c();',62,129,'|||span|class|href|max|indexOf||showpageNum||maksimal|var|nomerhal||jenis|script|results|postperpage|page|search||urlactivepage||label||||||onclick|false|return|document|lblname1|mulai|home_page|PageNo|substring|akhir|function|nopage|parseInt|nomerkiri|redirectpage|redirectlabel|src|jsonstart|length|alt|feeds|posts|summary|upPageWord|numshowpage|json|updated|callback|in|post|hitungtotaldata|finddatepost||downPageWord|http|write||div|innerHTML|loophalaman|for||img|com|halamanblogger|head|index|start|appendChild|published|getElementsByTagName|setAttribute|feed|createElement|text|type|javascript|padding|right|encodeURIComponent|float|location|2px|border|_blank|7pt|target|font|doisong24|www|showpageOf|else|img1|title|if|style|tdb|size|width|showpage|pager|blog|entry|openSearch|showpagePoint|html|totalResults|blogblog|getElementById|blank|Page|29|gif|pageArea||getElementsByName|of||height'.split('|'),0,{}))
//]]>
</script>
Từ mẫu 2 là phần CSS vì thay đổi kiểu dáng chỉ là thay đổi CSS còn phần javascript vẫn giữ nguyên
Mẫu 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://lh6.googleusercontent.com/-0-K8UEysjqY/UU8elJT1cvI/AAAAAAAAT00/Bw9cEkYUtQE/s90/lite.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px; 
margin:0px 1px 0 1px;padding:3px 10px;color:#222;line-height:30px;cursor:pointer;}.showpageNum a:hover,.showpage a:hover { 
background-image:url(https://lh6.googleusercontent.com/-0-K8UEysjqY/UU8elJT1cvI/AAAAAAAAT00/Bw9cEkYUtQE/s90/lite.png) repeat-x;background-position:0px -30px; 
border:2px solid #555;-webkit-border-radius:3px; 
-moz-border-radius:3px;border-radius:3px;color:#111;-text-decoration:underline;}.showpageOf{margin:0 8px 0 0; 
background:transparent url(https://lh6.googleusercontent.com/-0-K8UEysjqY/UU8elJT1cvI/AAAAAAAAT00/Bw9cEkYUtQE/s90/lite.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;line-height:30px;padding:3px 10px;color:#222;}.showpagePoint {background:transparent url(https://lh6.googleusercontent.com/-0-K8UEysjqY/UU8elJT1cvI/AAAAAAAAT00/Bw9cEkYUtQE/s90/lite.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 #111;-webkit-border-radius:3px; -moz-border-radius:3px;border-radius:3px;color:#777;text-decoration:underline;font-weight:bold; 
</style> 
Mẫu 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://lh3.googleusercontent.com/-eApJXTWgfcs/UU8fa1e7evI/AAAAAAAAT1A/A-xOm1QTY-Y/s197/transpdark.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px; 
margin:0px 1px 0 1px;padding:3px 10px;color:#eee;line-height:30px;cursor:pointer;}.showpageNum a:hover,.showpage a:hover { 
background-image:url(https://lh3.googleusercontent.com/-eApJXTWgfcs/UU8fa1e7evI/AAAAAAAAT1A/A-xOm1QTY-Y/s197/transpdark.png) repeat-x;background-position:0px -15px; 
border:2px solid #555;-webkit-border-radius:3px; 
-moz-border-radius:3px;border-radius:3px;color:#ffffff;-text-decoration:underline;}.showpageOf{margin:0 8px 0 0; 
background:transparent url(https://lh3.googleusercontent.com/-eApJXTWgfcs/UU8fa1e7evI/AAAAAAAAT1A/A-xOm1QTY-Y/s197/transpdark.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;line-height:30px;padding:3px 10px;color:#eee;}.showpagePoint {background:transparent url(https://lh3.googleusercontent.com/-eApJXTWgfcs/UU8fa1e7evI/AAAAAAAAT1A/A-xOm1QTY-Y/s197/transpdark.png) repeat-x;background-position:0px -15px;margin:0 3px 0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;border:2px solid #aaa;-webkit-border-radius:3px; -moz-border-radius:3px;border-radius:3px;color:#eee;text-decoration:underline;font-weight:bold; 
</style> 
Mẫu 4
<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://lh5.googleusercontent.com/-s_Mxp9RboDo/UU8f9KoqoJI/AAAAAAAAT1M/CqbETZf4_54/s32/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://lh5.googleusercontent.com/-s_Mxp9RboDo/UU8f9KoqoJI/AAAAAAAAT1M/CqbETZf4_54/s32/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://lh5.googleusercontent.com/-s_Mxp9RboDo/UU8f9KoqoJI/AAAAAAAAT1M/CqbETZf4_54/s32/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://lh5.googleusercontent.com/-s_Mxp9RboDo/UU8f9KoqoJI/AAAAAAAAT1M/CqbETZf4_54/s32/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> 
Mẫu 5
<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://lh3.googleusercontent.com/-rU1ms5jJtFc/UU8gb3CTPfI/AAAAAAAAT1Y/WrkybfOOOz0/s90/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://lh3.googleusercontent.com/-rU1ms5jJtFc/UU8gb3CTPfI/AAAAAAAAT1Y/WrkybfOOOz0/s90/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://lh3.googleusercontent.com/-rU1ms5jJtFc/UU8gb3CTPfI/AAAAAAAAT1Y/WrkybfOOOz0/s90/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://lh3.googleusercontent.com/-rU1ms5jJtFc/UU8gb3CTPfI/AAAAAAAAT1Y/WrkybfOOOz0/s90/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> 
Mẫu 6
<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://lh4.googleusercontent.com/-yR24QnSMBfA/UU8g-IHPemI/AAAAAAAAT1k/j6DBC4J9-KA/s146/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://lh4.googleusercontent.com/-yR24QnSMBfA/UU8g-IHPemI/AAAAAAAAT1k/j6DBC4J9-KA/s146/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://lh4.googleusercontent.com/-yR24QnSMBfA/UU8g-IHPemI/AAAAAAAAT1k/j6DBC4J9-KA/s146/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://lh4.googleusercontent.com/-yR24QnSMBfA/UU8g-IHPemI/AAAAAAAAT1k/j6DBC4J9-KA/s146/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> 
Mẫu 7
<style type="text/css">#blog-pager{height: 28px; 
padding: 10px 0 0; 
overflow:hidden; 
text-align:center; 
}.showpageArea a {text-decoration:underline; 
font-size: 16px; 
text-align: center;}.showpageNum a {font-size:16px;text-decoration:none;border: 1px solid #cccccc;margin:0 5px;padding:5px;}.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}.showpagePoint {font-size:16px;text-decoration:none;border: 1px solid #cccccc;background: #216FD9;margin:0 5px;padding:5px;color:#ffffff;}.showpageOf {text-decoration:none;padding:5px;margin: 0 5px;}.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:5px;}.showpage a:hover {text-decoration:none;background: #cccccc;}.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;} 
</style> 

Lưu ý
Để tiện ích phân trang chạy mượt mà không những tại trang chủ mà khi vào trang nhãn không bị hiện tượng liệt kê 1 dãy bài(20 bài)và có khi còn không thấy tiện ích phân trang đâu nữa.Các bạn cần làm thêm công việc sau:
Các bạn vào chỉnh sửa mẫu tìm tới những đoạn code có dạng:
expr:href='data:label.url'
Và sửa nó thành:
expr:href='data:label.url + &quot;?&amp;max-results=5&quot;'
Tiếp đến bạn đặt đoạn javascript dưới đây vào ngay sau thẻ <head>
<script type='text/javascript'>
//<![CDATA[
/*---- ©:Dautoblog-----*/
if(!location.href.match('max-results=')){if(location.href.match('/search/label/')){location.href = location.href + '?&max-results=5' ;}}
//]]>
</script>


- max-results=5' :Là số bài hiển thị mỗi lần phân trang.
Chúc thành công!
Nhận xét

Không có nhận xét nào :