Hướng dẫn tạo phân trang cho blogspot đẹp chuẩn nhất
Bài viết này mình Hướng dẫn Phân trang bài viết blogspot, cách phân trang số thứ tự Blogger, Phân trang trong Blogger Page Navigation. Cách tạo phân trang cho blogger đẹp.
I - Cách 1 - Kiểu 1
Phân trang Blogger này áp dụng cho các blog ở phiên bản mới LayoutsVersion 3
Cách tạo Phân trang bài viết blogspot như sau:
Bước 1: Thêm thư viện Font Awesome, các bạn copy đoạn code bên dưới dán dưới thẻ <head>
<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
Mục đích là tạo Icon sang phải, icon sang trái như hình trên.
Bước 2: Các bạn copy CSS bên dưới dán trong thẻ <b:skin> Dán ở đây </b:skin> dán phía dưới thẻ <b:skin> hoặc phía trên thẻ </b:skin> đều được.
.blog-pager-wrapper{text-align:center}
#blog-pager{display:inline-block;overflow:hidden;clear:both;margin:0 0 30px}
.blog-pager a,.blog-pager span{float:left;display:block;min-width:32px;height:32px;border:1px solid #d0d0d2;border-radius:100%;background:#ffffff;color:#000000;font-size:13px;font-weight:700;line-height:30px;text-align:center;box-sizing:border-box;padding:0 10px;margin:0 5px 0 0;transition:all .17s ease}
.blog-pager span.page-dots{display:none}
.blog-pager .page-of{display:none;width:auto;float:right;border-color:rgba(0,0,0,0);margin:0}
.blog-pager .page-active,.blog-pager a:hover{background-color:#E84E89;color:#fff;border-color:#E84E89}
.blog-pager .page-prev:before,.blog-pager .page-next:before{font-family:FontAwesome;font-size:11px;font-weight:400}
.blog-pager .page-prev:before{content:'\f053'}
.blog-pager .page-next:before{content:'\f054'}
.blog-pager .blog-pager-newer-link,.blog-pager .blog-pager-older-link{float:left;display:inline-block;width:auto;padding:0 10px;margin:0}
.blog-pager .blog-pager-older-link{float:right}
.archive #blog-pager,.home .blog-pager .blog-pager-newer-link,.home .blog-pager .blog-pager-older-link{display:none}
Bước 3: Bạn đoạn đoạn code Pagination Scripts này trước thẻ đóng </body>
<script>
//<![CDATA[
var postResults=7;
var numOfPages=2;
var pageOf=["Page", "of"];
var noPage,currentPage,currentPageNo,postLabel,locationUrl=location.href,home_page="/";function startPagination(e){var a="";pageNumber=parseInt(numOfPages/2),pageNumber==numOfPages-pageNumber&&(numOfPages=2*pageNumber+1),pageStart=currentPageNo-pageNumber,pageStart<1&&(pageStart=1),lastPageNo=parseInt(e/postResults)+1,lastPageNo-1==e/postResults&&(lastPageNo-=1),pageEnd=pageStart+numOfPages-1,pageEnd>lastPageNo&&(pageEnd=lastPageNo),a+='<span class="page-of">'+pageOf[0]+" "+currentPageNo+" "+pageOf[1]+" "+lastPageNo+"</span>";var t=parseInt(currentPageNo)-1;currentPageNo>1&&(a+=2==currentPageNo?"page"==currentPage?'<a class="page-num page-prev" href="'+home_page+'"></a>':'<a class="page-num page-prev" href="/search/label/'+postLabel+"?&max-results="+postResults+'"></a>':"page"==currentPage?'<a class="page-num page-prev" href="#" onclick="getPage('+t+');return false"></a>':'<a class="page-num page-prev" href="#" onclick="getLabelPage('+t+');return false"></a>'),pageStart>1&&(a+="page"==currentPage?'<a class="page-num" href="'+home_page+'">1</a>':'<a class="page-num" href="/search/label/'+postLabel+"?&max-results="+postResults+'">1</a>'),pageStart>2&&(a+='<span class="page-num page-dots">...</span>');for(var s=pageStart;s<=pageEnd;s++)a+=currentPageNo==s?'<span class="page-num page-active">'+s+"</span>":1==s?"page"==currentPage?'<a class="page-num" href="'+home_page+'">1</a>':'<a class="page-num" href="/search/label/'+postLabel+"?&max-results="+postResults+'">1</a>':"page"==currentPage?'<a class="page-num" href="#" onclick="getPage('+s+');return false">'+s+"</a>":'<a class="page-num" href="#" onclick="getLabelPage('+s+');return false">'+s+"</a>";pageEnd<lastPageNo-1&&(a+='<span class="page-num page-dots">...</span>'),pageEnd<lastPageNo&&(a+="page"==currentPage?'<a class="page-num" href="#" onclick="getPage('+lastPageNo+');return false">'+lastPageNo+"</a>":'<a class="page-num" href="#" onclick="getLabelPage('+lastPageNo+');return false">'+lastPageNo+"</a>");var r=parseInt(currentPageNo)+1;currentPageNo<lastPageNo&&(a+="page"==currentPage?'<a class="page-num page-next" href="#" onclick="getPage('+r+');return false"></a>':'<a class="page-num page-next" href="#" onclick="getLabelPage('+r+');return false"></a>'),a+="";for(var n=document.getElementsByName("pageArea"),g=document.getElementById("blog-pager"),l=0;l<n.length;l++)n[l].innerHTML=a;n&&n.length>0&&(a=""),g&&(g.innerHTML=a)}function dataFeed(e){var a=e.feed;startPagination(parseInt(a.openSearch$totalResults.$t,10))}function pageCurrentBlogger(){var e=locationUrl;-1!=e.indexOf("/search/label/")&&(postLabel=-1!=e.indexOf("?updated-max")?e.substring(e.indexOf("/search/label/")+14,e.indexOf("?updated-max")):e.substring(e.indexOf("/search/label/")+14,e.indexOf("?&max"))),-1==e.indexOf("?q=")&&-1==e.indexOf(".html")&&(-1==e.indexOf("/search/label/")?(currentPage="page",currentPageNo=-1!=locationUrl.indexOf("#PageNo=")?locationUrl.substring(locationUrl.indexOf("#PageNo=")+8,locationUrl.length):1,document.write("<script src='"+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=dataFeed'><\/script>")):(currentPage="label",-1==e.indexOf("&max-results=")&&(postResults=20),currentPageNo=-1!=locationUrl.indexOf("#PageNo=")?locationUrl.substring(locationUrl.indexOf("#PageNo=")+8,locationUrl.length):1,document.write('<script src="'+home_page+"feeds/posts/summary/-/"+postLabel+'?alt=json-in-script&callback=dataFeed&max-results=1" ><\/script>')))}function getPage(e){jsonstart=(e-1)*postResults,noPage=e;var a=document.getElementsByTagName("head")[0],t=document.createElement("script");t.type="text/javascript",t.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=findPostDate"),a.appendChild(t)}function getLabelPage(e){jsonstart=(e-1)*postResults,noPage=e;var a=document.getElementsByTagName("head")[0],t=document.createElement("script");t.type="text/javascript",t.setAttribute("src",home_page+"feeds/posts/summary/-/"+postLabel+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=findPostDate"),a.appendChild(t)}function findPostDate(e){post=e.feed.entry[0];var a=post.published.$t.substring(0,19)+post.published.$t.substring(23,29),t=encodeURIComponent(a);if("page"==currentPage)var s="/search?updated-max="+t+"&max-results="+postResults+"#PageNo="+noPage;else s="/search/label/"+postLabel+"?updated-max="+t+"&max-results="+postResults+"#PageNo="+noPage;location.href=s}pageCurrentBlogger();
//]]>
</script>
Trong đó postResults=7 chính là số lượng bài viết hiện thị ra.
II - Cách 2 - Kiểu 2
Bước 1: Thêm link js tạo phân trang đánh số thứ tự
Đăng nhập Blog > Chủ đề > Chỉnh sửa HTML. Thêm đoạn code sau vào trước thẻ </body>
<b:if cond='data:view.isMultipleItems'>
<script>
//<![CDATA[
var perPage = 15;
var numPages = 3;
var firstText = '<span class="firstText"></span>';
var lastText = '<span class="lastText"></span>';
var prevText = '<span class="prevText"></span>';
var nextText = '<span class="nextText"></span>';
var urlactivepage = location.href;
var home_page = "/";
//]]>
</script>
<script src='https://cdn.rawgit.com/ns24h/js/master/blog-paper.js'/>
</b:if>
Thiết lập:
var perPage = 15; // Số bài đăng hiển thị trong một trang
var numPages = 3; // Số phân trang hiển thị
Bước 2. Thêm css trong <b:skin> tạo style cho phân trang
#blog-pager .displaypageNum a,#blog-pager .pagecurrent,#blog-pager .showpage a{color: #333;font: 14px Roboto,sans-serif;margin-right: 5px;padding: 8px 12px;background: #fff;border: 1px solid #ddd;border-radius: 2px;}
#blog-pager.displaypageNum a:hover,#blog-pager .showpage a:hover{color:#fff;background:#005791;border:1px solid #005791}
#blog-pager .pagecurrent{font-weight:bold;color:#fff;background:#005791;border:1px solid #005791}
#blog-pager .showpageOf{float:right;display:none!important}
#blog-pager span.firstText:after,#blog-pager span.lastText:after,#blog-pager span.prevText:after,#blog-pager span.nextText:after{font-family:fontawesome;font-size:18px;vertical-align:text-bottom}
#blog-pager span.firstText:after{content:'f100'}
#blog-pager span.lastText:after{content:'f101'}
#blog-pager span.prevText:after{content:'f104'}
#blog-pager span.nextText:after{content:'f105'}
Kiểm tra xem template đã có thư viện font-awesome chưa nếu chưa có chèn link bên dưới trong thẻ <head>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
Lưu ý:
– Vào Cài đặt > Bài đăng nhận xét và chia sẻ > chọn Hiển thị tối đa bằng số bài đăng được thiết lập trong js ví dụ perPage = 15; thì cài đặt hiển thị tối đa 15 bài.
– Thêm ?&max-results=số trang ví dụ ?&max-results=15 đằng sau link Label ví dụ:
+ Khi tạo menu có dạng
<li><a href=”/search/label/mien-trung” title=”Miền Trung”>Miền Trung</a></li>
Sửa thành
<li><a href=”/search/label/mien-trung?&max-results=15″ title=”Miền Trung”>Miền Trung</a></li>
+ Với trường hợp link Label có dạng
<a expr:href=’data:label.url’ expr:title=’data:label.name’ ><data:label.name/></a>
Sửa thành
<a expr:href=’data:label.url + "?&max-results=15"’ expr:title=’data:label.name’ ><data:label.name/></a>
III - Cách 3 - Kiểu 3
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 != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var postperpage=10;
var numshowpage=4;
var upPageWord ="« Trước";
var downPageWord ="Tiếp »";
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>
numshowpage=4; số nút hiển thị trên thanh Navigation
Có thể thay « Trước và Tiếp » 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ạiKiểu 1
#blog-pager-older-link a,#blog-pager-newer-link a,a.home-link{width:80px;text-align:center;display:inline-block;color:#fff;font:bold 12px Arial;text-transform:none;margin:0;padding:5px 5px;background:#555;border:1px solid #111}
.blog-pager,#blog-pager{clear:both;font:bold 12px Arial;text-align:center;padding:15px 10px}
.showpageNum a,.showpage a{background:#fff;text-decoration:none;white-space:nowrap;color:#222;margin:10px 3px;padding:5px 10px;border:1px solid #999}
.showpageNum a:hover,.showpage a:hover{color:#fff;text-decoration:none;background-color:#444;border:1px solid #000}
.showpageOf{display:none;margin:0}
.showpagePoint{color:#fff;text-decoration:none;background-color:#444;font-size:12px;margin:10px 3px;padding:5px 10px;border:1px solid #000}
Kiểu 2
.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}
#blog-pager{font-size:normal} thành #blog-pager{font-size:normal;overflow:visible;} (Áp dụng từ Kiểu 2 đến Kiểu 11)Kiểu 3
.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}
Kiểu 4
.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}
Kiểu 5
.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}
Kiểu 6
.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}
Kiểu 7
.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}
Kiểu 8
.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}
Kiểu 9
.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}
Kiểu 10
.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}
Kiểu 11
.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}
0 Response to "Hướng dẫn tạo phân trang cho blogspot đẹp chuẩn nhất"
Post a Comment