Thủ thuật blogspot - Dautoblog

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

Tạo phân trang đẹp cho Blogspot phần 2
Như đã giới thiệu ở bài Tạo phân trang đẹp cho Blogspot phần 1
Dưới đây sẽ chia sẻ code tạo phân trang kiểu 2 cho blogspot.Về cơ bản các tiện ích này đều giúp khách truy cập dễ dàng trong việc điều hướng trang web/blog một tiện ích mà trang web/blog nào cũng cần có.
Để đơ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.
Trong ảnh có tất cả 10 mẫu phân trang có đánh số thứ tự bên cạnh bạn thích loại nào thì lấy code tương ứng ở bên dưới
Tạo phân trang đẹp cho Blogspot phần 2
Mẫu 1
/* Phần CSS */
<style type='text/css'>
.blog-pager,#blog-pager{font-size:normal}
.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}
.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:bold}
.showpageNum a{color:#000;padding:3px 8px;margin:0 4px;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;background:#f8b5a4 url(https://lh4.googleusercontent.com/-8bahjrCLLzU/UU8DsQt00NI/AAAAAAAATyo/MiETBQ-qRQ0/s90/pagenav1.png) 0 -60px repeat-x}
.showpageNum a:hover{border:1px solid #888;background:#f7cac9 url(https://lh4.googleusercontent.com/-8bahjrCLLzU/UU8DsQt00NI/AAAAAAAATyo/MiETBQ-qRQ0/s90/pagenav1.png) 0 -30px repeat-x}.showpageOf{margin:0 4px 0 0}
.showpagePoint{color:#666;padding:3px 8px;margin:2px;font-weight:bold;-webkit-border-radius:3px;-moz-border-radius:3px;border:1px solid #999;background:#f2f0f0 url(https://lh4.googleusercontent.com/-8bahjrCLLzU/UU8DsQt00NI/AAAAAAAATyo/MiETBQ-qRQ0/s90/pagenav1.png) 0 -5px repeat-x;text-decoration:none}" 
</style>
/* Phần javascript */
<script type='text/javascript'>
var postperpage=5;//Số bài viết mỗi lần phân trang
var numshowpage=5;//Số nút phân trang
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}('7 O;7 j;7 h;7 r;1q();I 1o(1f){7 6=\'\';L=J(Y/2);5(L==Y-L){Y=L*2+1}C=h-L;5(C<1)C=1;e=J(1f/k)+1;5(e-1==1f/k)e=e-1;H=C+Y-1;5(H>e)H=e;6+="<4 9=\'1T\'>1Q "+h+\' 1P \'+e+"</4>";7 1e=J(h)-1;5(h>1){5(h==2){5(j=="u"){6+=\'<4 9="1M"><a b="\'+B+\'">\'+X+\'</a></4>\'}c{6+=\'<4 9="g"><a b="/v/s/\'+r+\'?&d-l=\'+k+\'">\'+X+\'</a></4>\'}}c{5(j=="u"){6+=\'<4 9="g"><a b="#" z="M(\'+1e+\');y x">\'+X+\'</a></4>\'}c{6+=\'<4 9="g"><a b="#" z="N(\'+1e+\');y x">\'+X+\'</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="/v/s/\'+r+\'?&d-l=\'+k+\'">1</a></4>\'}}5(C>2){6+=\' ... \'}1n(7 n=C;n<=H;n++){5(h==n){6+=\'<4 9="1N">\'+n+\'</4>\'}c 5(n==1){5(j=="u"){6+=\'<4 9="g"><a b="\'+B+\'">1</a></4>\'}c{6+=\'<4 9="g"><a b="/v/s/\'+r+\'?&d-l=\'+k+\'">1</a></4>\'}}c{5(j=="u"){6+=\'<4 9="g"><a b="#" z="M(\'+n+\');y x">\'+n+\'</a></4>\'}c{6+=\'<4 9="g"><a b="#" z="N(\'+n+\');y x">\'+n+\'</a></4>\'}}}5(H<e-1){6+=\'...\'}5(H<e){5(j=="u"){6+=\'<4 9="g"><a b="#" z="M(\'+e+\');y x">\'+e+\'</a></4>\'}c{6+=\'<4 9="g"><a b="#" z="N(\'+e+\');y x">\'+e+\'</a></4>\'}}7 1b=J(h)+1;5(h<e){5(j=="u"){6+=\'<4 9="g"><a b="#" z="M(\'+1b+\');y x">\'+1i+\'</a></4>\'}c{6+=\'<4 9="g"><a b="#" z="N(\'+1b+\');y x">\'+1i+\'</a></4>\'}}6+=\'<1j><a b="1m://1S.1L.1l" 1D="1F" 1E="1K-1G: 1I; 1H: 1U; 1V: 2c;" 27="26"><1k 2a="0" K="1m://2b.2e.1l/1k/2d.28" 24="3" 1X="3" /></a></1j>\';7 E=w.1W("E");7 16=w.25("1Y-1Z");1n(7 p=0;p<E.Q;p++){E[p].1h=6}5(E&&E.Q>0){6=\'\'}5(16){16.1h=6}}I 1a(U){7 W=U.W;7 1g=J(W.22$21.$t,10);1o(1g)}I 1q(){7 i=o;5(i.f("/v/s/")!=-1){5(i.f("?R-d")!=-1){r=i.G(i.f("/v/s/")+14,i.f("?R-d"))}c{r=i.G(i.f("/v/s/")+14,i.f("?&d"))}}5(i.f("?q=")==-1&&i.f(".6")==-1){5(i.f("/v/s/")==-1){j="u";5(o.f("#D=")!=-1){h=o.G(o.f("#D=")+8,o.Q)}c{h=1}w.1C("<m K=\\""+B+"P/S/Z?d-l=1&15=13-11-m&T=1a\\"><\\/m>")}c{j="s";5(i.f("&d-l=")==-1){k=20}5(o.f("#D=")!=-1){h=o.G(o.f("#D=")+8,o.Q)}c{h=1}w.1C(\'<m K="\'+B+\'P/S/Z/-/\'+r+\'?15=13-11-m&T=1a&d-l=1" ><\\/m>\')}}}I M(F){12=(F-1)*k;O=F;7 V=w.1r(\'1x\')[0];7 A=w.1w(\'m\');A.1v=\'1u/1t\';A.1p("K",B+"P/S/Z?1z-1s="+12+"&d-l=1&15=13-11-m&T=1c");V.1y(A)}I N(F){12=(F-1)*k;O=F;7 V=w.1r(\'1x\')[0];7 A=w.1w(\'m\');A.1v=\'1u/1t\';A.1p("K",B+"P/S/Z/-/"+r+"?1z-1s="+12+"&d-l=1&15=13-11-m&T=1c");V.1y(A)}I 1c(U){1d=U.W.1R[0];7 1A=1d.1B.$t.G(0,19)+1d.1B.$t.G(23,29);7 17=1J(1A);5(j=="u"){7 18="/v?R-d="+17+"&d-l="+k+"#D="+O}c{7 18="/v/s/"+r+"?R-d="+17+"&d-l="+k+"#D="+O}1O.b=18}',62,139,'||||span|if|html|var||class||href|else|max|maksimal|indexOf|showpageNum|nomerhal|thisUrl|jenis|postperpage|results|script|jj|urlactivepage|||lblname1|label||page|search|document|false|return|onclick|newInclude|home_page|mulai|PageNo|pageArea|numberpage|substring|akhir|function|parseInt|src|nomerkiri|redirectpage|redirectlabel|nopage|feeds|length|updated|posts|callback|root|nBody|feed|upPageWord|numshowpage|summary||in|jsonstart|json||alt|blogPager|timestamp|alamat||hitungtotaldata|nextnomer|finddatepost|post|prevnomer|banyakdata|totaldata|innerHTML|downPageWord|div|img|com|http|for|loophalaman|setAttribute|halamanblogger|getElementsByTagName|index|javascript|text|type|createElement|head|appendChild|start|timestamp1|published|write|title|style|DautoBlog|size|float|7pt|encodeURIComponent|font|dautoblog|showpage|showpagePoint|location|of|Page|entry|www|showpageOf|right|padding|getElementsByName|height|blog|pager||totalResults|openSearch||width|getElementById|_blank|target|gif||border|img1|2px|blank|blogblog'.split('|'),0,{}))
//]]>
</script>
Từ mẫu 2 chỉ giới thiệu phần CSS vì thay đổi kiểu mẫu là thay đổi phần CSS
Mẫu 2
<style type='text/css'>
.blog-pager,#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:normal}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;background:#b1a7c3 url(https://lh4.googleusercontent.com/-zlDnvRF6vkc/UU8Dsbi6KUI/AAAAAAAATys/MuyxQSXFJAE/s90/pagenav2.png) 0 -60px repeat-x}.showpageNum a:hover{border:1px solid #888;background:#f7b36a url(https://lh4.googleusercontent.com/-zlDnvRF6vkc/UU8Dsbi6KUI/AAAAAAAATys/MuyxQSXFJAE/s90/pagenav2.png) 0 -30px repeat-x}.showpageOf{margin:0 4px 0 0}.showpagePoint{color:#444;text-shadow:0 1px 2px #333;padding:3px 8px;margin:2px;font-weight:700;-webkit-border-radius:3px;-moz-border-radius:3px;border:1px solid #999;background:#f7d5b0 url(https://lh4.googleusercontent.com/-zlDnvRF6vkc/UU8Dsbi6KUI/AAAAAAAATys/MuyxQSXFJAE/s90/pagenav2.png) 0 0 repeat-x;text-decoration:none} 
</style>
Mẫu 3
<style type='text/css'>
.blog-pager,#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:normal}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;border-bottom:3px solid #fe9a2e;background:#f7f8e0}.showpageNum a:hover{border-bottom:3px solid #df01d7;background:#f6cee3}.showpageOf{margin:0 4px 0 0}.showpagePoint{color:#333;text-shadow:0 1px 2px #333;padding:3px 8px;margin:2px;font-weight:700;border-bottom:3px solid #fe9a2e;background:#f8e0f7;text-decoration:none}
</style>
Mẫu 4
<style type='text/css'>
.blog-pager,#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:normal}.showpageNum a{padding:2px 8px;margin:0 4px;text-decoration:none;border-bottom:2px solid #5fb404;border-top:2px solid #5fb404;background:#effbf5}.showpageNum a:hover{border-bottom:2px solid #df01d7;background:#a9f5f2;border-top:2px solid #df01d7}.showpageOf{margin:0 4px 0 0}.showpagePoint{color:#fff;text-shadow:0 1px 2px #333;padding:2px 8px;margin:2px;font-weight:700;border-bottom:2px solid #5e610b;border-top:2px solid #5e610b;background:#5e610b;text-decoration:none}
</style>
Mẫu 5
<style type='text/css'>
.blog-pager,#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:700}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;background:#ddd url(https://lh4.googleusercontent.com/-Mr9smxMcLw4/UU8F_y4J7-I/AAAAAAAATzA/1sDDrLx7JiQ/s75/wp1.jpg) 0 -50px repeat-x}.showpageNum a:hover{border:1px solid #888;background:#ccc url(https://lh4.googleusercontent.com/-Mr9smxMcLw4/UU8F_y4J7-I/AAAAAAAATzA/1sDDrLx7JiQ/s75/wp1.jpg) 0 -25px repeat-x}.showpageOf{margin:0 4px 0 0}.showpagePoint{color:#fff;text-shadow:0 1px 2px #333;padding:3px 8px;margin:2px;font-weight:700;-webkit-border-radius:3px;-moz-border-radius:3px;border:1px solid #999;background:#666 url(https://lh4.googleusercontent.com/-Mr9smxMcLw4/UU8F_y4J7-I/AAAAAAAATzA/1sDDrLx7JiQ/s75/wp1.jpg) 0 0 repeat-x;text-decoration:none}
</style>
Mẫu 6
<style type='text/css'>
.blog-pager,#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:700}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;border:1px solid #919106;-webkit-border-radius:3px;-moz-border-radius:3px;background:#ddd url(https://lh5.googleusercontent.com/-pJP_vbUPc1o/UU8F_-YKXsI/AAAAAAAATzE/znj8c9Srky8/s75/wp2.jpg) 0 -50px repeat-x}.showpageNum a:hover{border:1px solid #aeae0a;background:#ccc url(https://lh5.googleusercontent.com/-pJP_vbUPc1o/UU8F_-YKXsI/AAAAAAAATzE/znj8c9Srky8/s75/wp2.jpg) 0 -25px repeat-x}.showpageOf{margin:0 5px 0 0}.showpagePoint{color:#fff;text-shadow:0 1px 2px #333;padding:3px 8px;margin:2px;font-weight:bold;-webkit-border-radius:3px;-moz-border-radius:3px;border:1px solid #919106;background:#666 url(https://lh5.googleusercontent.com/-pJP_vbUPc1o/UU8F_-YKXsI/AAAAAAAATzE/znj8c9Srky8/s75/wp2.jpg) 0 0 repeat-x;text-decoration:none}
</style>
Mẫu 7
<style type='text/css'>
.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:#363636 url(https://lh6.googleusercontent.com/-GzA3JzM7NwU/UU8F_6RNuFI/AAAAAAAATzM/kdh6xftfRzA/s75/wp3.jpg) 0 -25px repeat-x}.showpageNum a:hover{background:#044697 url(https://lh6.googleusercontent.com/-GzA3JzM7NwU/UU8F_6RNuFI/AAAAAAAATzM/kdh6xftfRzA/s75/wp3.jpg) 0 -50px repeat-x}.showpagePoint{color:#fff;padding:3px 8px;margin:2px;font-weight:700;background:#e30000 url(https://lh6.googleusercontent.com/-GzA3JzM7NwU/UU8F_6RNuFI/AAAAAAAATzM/kdh6xftfRzA/s75/wp3.jpg) 0 0 repeat-x;text-decoration:none}.showpageOf{margin:0 5px 0 0}
</style>
Mẫu 8
<style type='text/css'>
.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;border-top:2px solid #000;border-left:1px solid #000;border-right:1px solid #000;border-bottom:1px solid #000;background:#666 url(https://lh5.googleusercontent.com/-EBKl8z_n2Gk/UU8GAAztmNI/AAAAAAAATzU/Eggqyx00ppU/s75/wp4.jpg) 0 -25px repeat-x}.showpageNum a:hover{border-top:1px solid #999;border-left:1px solid #999;border-right:1px solid #999;border-bottom:2px solid #999;background:#999 url(https://lh5.googleusercontent.com/-EBKl8z_n2Gk/UU8GAAztmNI/AAAAAAAATzU/Eggqyx00ppU/s75/wp4.jpg) 0 -50px repeat-x}.showpagePoint{color:#fff;padding:3px 8px;margin:2px;font-weight:700;border-top:2px solid #000;border-left:1px solid #000;border-right:1px solid #000;border-bottom:1px solid #000;background:#000 url(https://lh5.googleusercontent.com/-EBKl8z_n2Gk/UU8GAAztmNI/AAAAAAAATzU/Eggqyx00ppU/s75/wp4.jpg) 0 0 repeat-x;text-decoration:none}.showpageOf{margin:0 5px 0 0}
</style>
Mẫu 9
<style type='text/css'>
.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://lh6.googleusercontent.com/-WIJli17iGS0/UU8GAWbdvzI/AAAAAAAATzY/6kf9RnV63F4/s75/wp5.jpg) 0 -50px repeat-x}.showpageNum a:hover{background:#666 url(https://lh6.googleusercontent.com/-WIJli17iGS0/UU8GAWbdvzI/AAAAAAAATzY/6kf9RnV63F4/s75/wp5.jpg) 0 -25px repeat-x}.showpagePoint{color:#fff;padding:3px 8px;margin:2px;font-weight:700;background:#06a2b9 url(https://lh6.googleusercontent.com/-WIJli17iGS0/UU8GAWbdvzI/AAAAAAAATzY/6kf9RnV63F4/s75/wp5.jpg) 0 0 repeat-x;text-decoration:none}.showpageOf{margin:0 5px 0 0}
</style>
Mẫu 10
<style type='text/css'>
.blog-pager,#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#fff;font-size:11px;margin:10px;padding:8px 20px;background:#333}.showpageArea a{color:#fff}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;background:#666}.showpageNum a:hover{background:#aeb404}.showpagePoint{color:#fff;padding:3px 8px;margin:2px;font-weight:700;background:#da6100;text-decoration:none}.showpageOf{margin:0 5px 0 0}
</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':Số bài hiển thị mỗi lần phân trang.

Ở đây ta thống nhất mỗi lần phân trang trên mỗi trang hiển thị 5 bài và cài đặt số bài ở trang chủ cũng là 5 và số nút phân trang(numshowpage) hiển thị cũng là 5 số nút này tùy thuộc vào độ rộng của khung post bài mà bạn có thể thay đổi cho hợp lý.
Comments blogger

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