Phân trang cho Blogspot dùng CSS
<div class="codeview"><code>
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwGpQqNwfrXY_6Npvk5Efvlj7Mbj2FFcffivWhdMo-kpjL1dltS-upYSzGECNwF1O-yq_yc08MjKcJ3PeDEo5e_wRPiUqE9iu4lNN1agTuFsKLtg-wkY7p4yaS9vbEe1qePKy4FEyEleGV/s400/black.jpg)
<style type="text/css">#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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9yAI0FnYHfeMJCXqG6qUsVC0yZ_gsG6dlcsEcjsJ5cSe3BPg-BDiC0zMaB4pLOkAFSpsFRfeoRI8R3DQcy2sZeu4HZvhraaEIfiJeY2YSM-Wd6Ab-mIT3QR4UyXVlUU2FV_htFbQFkcY/s1600/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9yAI0FnYHfeMJCXqG6qUsVC0yZ_gsG6dlcsEcjsJ5cSe3BPg-BDiC0zMaB4pLOkAFSpsFRfeoRI8R3DQcy2sZeu4HZvhraaEIfiJeY2YSM-Wd6Ab-mIT3QR4UyXVlUU2FV_htFbQFkcY/s1600/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9yAI0FnYHfeMJCXqG6qUsVC0yZ_gsG6dlcsEcjsJ5cSe3BPg-BDiC0zMaB4pLOkAFSpsFRfeoRI8R3DQcy2sZeu4HZvhraaEIfiJeY2YSM-Wd6Ab-mIT3QR4UyXVlUU2FV_htFbQFkcY/s1600/wp4.jpg) 0 0 repeat-x;text-decoration:none}.showpageOf{margin:0 5px 0 0} </style>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqQUu6ML0JIqJciNKMteprq8o-bAMvVywKLRRLBrJKZ-8qD9weWG7zzzhZE3ZoQRziT6WF8hxodOyb7s0Q8xfs7AQX9npfAWUuVnEu2TvPa9CqCzn9LLjW7fMcxYDCXmioJiv2KjT7iyCu/s400/Superb+Numbered+Page+Navigation+Widget.jpg)
<style type="text/css">#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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX7Tx2-U9dKrwT0cFvUvxTTgoHlGBg5I3glAMmqOLvpv7SZez_7i1Ia369y5L0mDjHfqwjyDVIUM7BX8FsDwhtgl7dSI6Wa6IFF-PviAk6qLy2aEueRXokE8pSStdxAiIne5c4d2KlK-8/s1600/wp3.jpg) 0 -25px repeat-x}.showpageNum a:hover{background:#044697 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX7Tx2-U9dKrwT0cFvUvxTTgoHlGBg5I3glAMmqOLvpv7SZez_7i1Ia369y5L0mDjHfqwjyDVIUM7BX8FsDwhtgl7dSI6Wa6IFF-PviAk6qLy2aEueRXokE8pSStdxAiIne5c4d2KlK-8/s1600/wp3.jpg) 0 -50px repeat-x}.showpagePoint{color:#fff;padding:3px 8px;margin:2px;font-weight:700;background:#e30000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX7Tx2-U9dKrwT0cFvUvxTTgoHlGBg5I3glAMmqOLvpv7SZez_7i1Ia369y5L0mDjHfqwjyDVIUM7BX8FsDwhtgl7dSI6Wa6IFF-PviAk6qLy2aEueRXokE8pSStdxAiIne5c4d2KlK-8/s1600/wp3.jpg) 0 0 repeat-x;text-decoration:none}.showpageOf{margin:0 5px 0 0} </style>
<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://bloggertrickandtoolz.googlecode.com/files/bloggertricksandtoolz.com-blogger_pnavi.js'></script>
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBOmXekn-P7v43wb1txESeR5jTWa7fpfxw2ZT4T2vqnKxCiTGaevql_fLc35pB68Z3CKJ3qA1ioASzxv90rXcezndlBst5YRfpO5Srlhd5JSTJTnp-a1pROz63dCPsuqhFAuvN5wmeNAj6/s400/new.jpg)
<!-- Stylish colored Navigation Widget For Blogger By www.bloggertricksandtoolz.com-->
<style type="text/css">
#blog-pager{padding:5px 0 !important;}
.showpageArea {font-weight: bold;margin:5px;}/* www.bloggertricksandtoolz.com */
.showpageArea a {text-decoration:underline;color: #fff;}/* www.bloggertricksandtoolz.com */
.showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #789EB1; background: -moz-linear-gradient(top, #789EB1 0%, #618FA7 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#789EB1), color-stop(100%,#618FA7)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#789EB1', endColorstr='#618FA7',GradientType=0 ); }/* www.bloggertricksandtoolz.com */
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc;background: #7d7e7d; background: -moz-linear-gradient(top, #7d7e7d 0%, #6B6B6B 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#6B6B6B)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#6B6B6B',GradientType=0 ); }/* www.bloggertricksandtoolz.com */
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }/* www.bloggertricksandtoolz.com*/
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* www.bloggertricksandtoolz.com*/
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* www.bloggertricksandtoolz.com*/
</style>
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=5;
var numshowpage=3;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Yy5n6pr5zKxWtQnFRr3FhP1eQVVbYci8UdOPG6hasbhixVPNADj83hCHJUCSgN6qxzNy9cSQbwc1aqsUxOQR-3m-CVIkyMAfutr9DERo8TwF1RhI45kl4zFmNj2UZ5uADuyoQubWBM_R/s400/green.png)
<style type="text/css">
#blog-pager{padding:5px 0 !important;}
.showpageArea {font-weight: bold;margin:5px;}/* www.bloggertricksandtoolz.com*/
.showpageArea a {text-decoration:underline;color: #fff;}/* www.bloggertricksandtoolz.com */
.showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;margin:0 3px;padding:3px 5px; background: #9dd53a; background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); }/* www.bloggertricksandtoolz.com*/
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #6db3f2; background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); } /* www.bloggertricksandtoolz.com*/
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }/* www.bloggertricksandtoolz.com*/
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* www.bloggertricksandtoolz.com */
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/*www.bloggertricksandtoolz.com*/
</style>
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=5;
var numshowpage=3;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdqxMfpHWYeCNGvbJggM0MRvdCVpV247BNPJ_unM7pRZENi_dMPVn-56i0oG110Gm6lKw-HZsSkNfrxUTrXM9omIhBuAyO9HFSYoARBXVyxdqiyEUlSFwt2kSzQD-lUukNoM4AiuE3Ay_c/s400/orange+colour.png)
<style type="text/css">
#blog-pager{padding:5px 0 !important;}
.showpageArea {font-weight: bold;margin:5px;}/* www.bloggertricksandtoolz.com*/
.showpageArea a {text-decoration:underline;color: #fff;}/* www.bloggertricksandtoolz.com*/
.showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #ffb76b; background: -moz-linear-gradient(top, #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(50%,#ffa73d), color-stop(51%,#ff7c00), color-stop(100%,#ff7f04)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 ); }/* www.bloggertricksandtoolz.com */
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #9dd53a; background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); }/* www.bloggertricksandtoolz.com */
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }/* www.bloggertricksandtoolz.com */
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* www.bloggertricksandtoolz.com*/
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* www.bloggertricksandtoolz.com*/
</style>
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=5;
var numshowpage=3;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWFHjOlL0VA9qV0Ats7unwO23J6clenwe-Nx7rOF1OMogT2GFFshy5oXhl30a2u6PHul93cVg-okI9K5DVht9xUjRr7uc4WW6w-PzD5PeNpXkllLEEX6lgIUqAdkG0gDjvMfF3f2tnEhAO/s400/Numbered+Page+Navigation+Widget.png)
<style type="text/css">#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>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnvgT0pFYq55q4e2Avj0N_VjSghRPT4fcjiszGw6hZbkdHO_gRmdweMecuDLK4vmvNX7SUrbEVv60Zx16yxVLNz0SLozaZfQ4Kt7gQLA-qYQp-M1jYpIl7wNAR1YV1jnPwO5N3WwpCTBfw/s400/Page+Navigation.jpg)
<style type="text/CSS">
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #7AA1C3;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #7AA1C3;
background-color:#F6F6F6;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #7AA1C3;
background: #F6F6F6;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #7AA1C3;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#7AA1C3;
}
</style>
<script type="text/JavaScript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)=="Your Url hear";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var pageCount = 2;
var displayPageNum = 5;
var upPageWord = 'Previous';
var downPageWord = 'Next';
var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
}
</script>
Chúc thành công!
Đăng nhận xét