
How To Add Blogger Page Navigation
- First You Should Take Backup of Your Blogger Template.
- Now Log in to your Bogger Account.
- In Your Dashboard Navigate to Template>>
- Click on Edit HTML>> Button and Proceed>>
- Search for
]]></b:skin>
- Replace above code with this code
.showpageArea {
color: #666666;
margin: 10px 5px 3px 5px;
padding: 0px;
float: left;
display: inline;
font-size:12px;
}
.showpageArea a {
background: #ffffff;
padding: 4px 7px;
margin: 0px 5px 0px 0px;
text-decoration: none;
border: 1px solid #9E0909;
color: #666666;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
display: inline;
float: left;
}
.showpageNum a {
background: #ffffff;
padding: 4px 7px;
margin: 0px 5px 0px 0px;
text-decoration: none;
border: 1px solid #9E0909;
color: #666666;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
display: inline;
float: left;
}
.showpageNum a:hover {
background: #FAE2E2 !important;
text-decoration: none;
border: 1px solid #9E0909 !important;
}
.showpagePoint {
font-weight: bold;
background: #FAE2E2;
padding: 4px 7px;
margin: 0px 5px 0px 0px;
text-decoration: none;
border: 1px solid #9E0909;
color: #666666;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
display: inline;
float: left;
}
.showpageOf {
background: #ffffff;
padding: 4px 7px;
margin: 0px 5px 0px 0px;
text-decoration: none;
border: 1px solid #9E0909;
color: #666666;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
display: inline;
float: left;
}
.showpage a {
background: #ffffff;
padding: 4px 7px;
margin: 0px 5px 0px 0px;
text-decoration: none;
border: 1px solid #B9A2A2;
color: #674D4D;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
display: inline;
float: left;
}
.showpage a:hover {
background: #FCE4E4 !important;
text-decoration: none;
border: 1px solid #9E0909 !important;
}
.showpageNum a:link,.showpage a:link {
background: #ffffff;
padding: 4px 7px;
margin: 0px 5px 0px 0px;
text-decoration: none;
border: 1px solid #9E0909;
color: #666666;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
display: inline;
float: left;
}
]]></b:skin>
color: #666666;
margin: 10px 5px 3px 5px;
padding: 0px;
float: left;
display: inline;
font-size:12px;
}
.showpageArea a {
background: #ffffff;
padding: 4px 7px;
margin: 0px 5px 0px 0px;
text-decoration: none;
border: 1px solid #9E0909;
color: #666666;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
display: inline;
float: left;
}
.showpageNum a {
background: #ffffff;
padding: 4px 7px;
margin: 0px 5px 0px 0px;
text-decoration: none;
border: 1px solid #9E0909;
color: #666666;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
display: inline;
float: left;
}
.showpageNum a:hover {
background: #FAE2E2 !important;
text-decoration: none;
border: 1px solid #9E0909 !important;
}
.showpagePoint {
font-weight: bold;
background: #FAE2E2;
padding: 4px 7px;
margin: 0px 5px 0px 0px;
text-decoration: none;
border: 1px solid #9E0909;
color: #666666;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
display: inline;
float: left;
}
.showpageOf {
background: #ffffff;
padding: 4px 7px;
margin: 0px 5px 0px 0px;
text-decoration: none;
border: 1px solid #9E0909;
color: #666666;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
display: inline;
float: left;
}
.showpage a {
background: #ffffff;
padding: 4px 7px;
margin: 0px 5px 0px 0px;
text-decoration: none;
border: 1px solid #B9A2A2;
color: #674D4D;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
display: inline;
float: left;
}
.showpage a:hover {
background: #FCE4E4 !important;
text-decoration: none;
border: 1px solid #9E0909 !important;
}
.showpageNum a:link,.showpage a:link {
background: #ffffff;
padding: 4px 7px;
margin: 0px 5px 0px 0px;
text-decoration: none;
border: 1px solid #9E0909;
color: #666666;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
display: inline;
float: left;
}
]]></b:skin>
- Now Search for this code
</body>
- Replace with
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>
<script src='http://bplugins.googlecode.com/files/pagenumbers.js' type='text/javascript'></script>
</body>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>
<script src='http://bplugins.googlecode.com/files/pagenumbers.js' type='text/javascript'></script>
</body>
Change These Numbers
- var postperpage=7; (Number of Posts Per Page)
- var numshowpage=4; (Page Numbers on Each Page)
- Now, Find ‘data:label.url’ and
- Replace with ‘data:label.url + “?&max-results=7″‘
- Save Template
2 comments
Good bro!
Thanks Its really amazing.
http://www.saeedbaba.com/
nice post and nice blog
EmoticonEmoticon