Numbered Page Navigation For Blogger

Numbered Page Navigation is very important for Blogger as it is useful to navigate in huge blogs.We had already posted a numbered page navigation for blogger here we had provide a hosted version of the numbered page navigation with additional CSS styles.You can also edit your own styles or styles by other bloggers.

Numbered Page Navigation for Blogger CSS code

• Log in to blogger.
• Then expand widget template.
• Then search for ]]></b:skin>
• Then above it paste the following code.

#blog-pager{
padding:10px 0;
clear:both;
}
.showpageNum a{
color:#333333;
text-decoration:none;
border: 1px solid #CCCCCC;
margin:0 3px;padding:3px 7px;
background-color:#FFFFFF;
}
.showpageNum a:hover, .showpage a:hover, .showpagePoint {
color:#333333;
border: 1px solid #CCCCCC;
padding:3px 7px;
background-color:#CCCCCC;
margin:0 3px;
}
.showpageOf{color:#333;
text-decoration:none;
padding:3px 7px;
margin: 0 3px 0 0;
}

Numbered Page Navigation for Blogger Script

• Now search for </body>
• Then above it paste the following code.

<script style='text/javascript'>
var numshowpage=3;
var postperpage =5;
var upPageWord="Previous";
var downPageWord="Next";
var urlactivepage=location.href;
var home_page="/";
</script>
<script style='text/javascript' src='https://blog4al.googlecode.com/files/blogger-numbered-page-navigation.js'></script>

Optimize the above code to get the numbered page navigation for better look for your template.You can also  adjust number of pages and post in a page.