Numbered Page Navigation for Blogger

Now am going to explain how to make Numbered Page Navigation for Blogger blogs. It was an already described topic in many blogs, Its also one from my readers. The default navigation links is not easy if you are having a lot of posts. Its a completely new script and work for numbered page navigation for Blogger. It is a must have for any new blogs.This new script allows you to add numbered page navigation to blogger/ blogspot blog.

Steps:

1.Login to Blogger Dashboard and navigate to Layout > Edit Html

2.Don’t click the checkbox which says ‘Expand Widget Templates’

3.Now find :

]]></b:skin>

and replace with

/* Page Navigation styles */ .showpageNum a {   padding: 3px 8px;   margin:0 4px;   text-decoration: none;   border:1px solid #999;   -webkit-border-radius:3px;-moz-border-radius:3px;   background: #ddd;   } .showpageOf { margin:0 8px 0 0; } .showpageNum a:hover {   border:1px solid #888;   background: #ccc;   } .showpagePoint {   color:#fff;   text-shadow:0 1px 2px #333;   padding: 3px 8px;   margin: 2px;   font-weight: 700;   -webkit-border-radius:3px;-moz-border-radius:3px;   border:1px solid #999;   background: #666;   text-decoration: none;   } ]]></b:skin>

This is the CSS part. You can change it according to your template. If you not sure comment below, i will help you.
4. Now find

</body>

and replace with

<!--Page Navigation Starts-->
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=5;
var numshowpage=4;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://mybloggertricksorg.googlecode.com/files/colorizetemplates-pagenav.js' type='text/javascript'></script>
<!--Page Navigation Ends -->

There are some customization parameters in this code

varpostperpage=4;

This code determines the number of posts that would be displayed per page.

varnumshowpage=6;

This code determines the number of additional page navigation numbers that will be displayed on the page.

var upPageWord =&#39;Previous&#39;;
downPageWord =&#39;Next&#39;;

These two lines determine the text that would be shown for the previous page and next page.