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

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

• 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