04 June, 2012

Blogger Page Navigation – Page Numbers for Blogspot


Blogger Page Navigation is a most wanted script because almost every person wants to add pagination to his/her Blogger Blog and its look like awesome and user can easily navigate the blog.To add blogger page navigation please follow these steps.

How To Add Blogger Page Navigation

]]></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>
  • 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>

Change These Numbers
  1. var postperpage=7; (Number of Posts Per Page)
  2. var numshowpage=4; (Page Numbers on Each Page)
  • Now, Find ‘data:label.url’ and 
  • Replace with ‘data:label.url + “?&amp;max-results=7″‘
  • Save Template

Muhammad Shoaib have a good experience in the field of Blogging since decade. If you are a new blogger who just starts your blogging career then www.shoaibonline.com is the perfect place to learn about blogging.

2 comments

Good bro!
Thanks Its really amazing.

http://www.saeedbaba.com/

nice post and nice blog


EmoticonEmoticon