Numbered Page Navigation For Blogger

Blogger fiture page navogation is awaited by most of the bloggers all the time. Perhaps we often see page navigation at worpress blog using a plugin (wp-pagenavi by Lester Chan). Muhammad RIAs from techie has developed a page navigation system for bloggers, it's very unusual when nobody is thinking about this. However, in the realization there are still some minor bugs which later refined by Abu Farhan who now gives us a solution for this.
If you are still confused about what a navigation page that follows will show me a screenshot of the page navigation.

When you use this hack,you will see this kind of navigation on your blog’s home page and label pages(needs little customization). 

Implementation of Blogger Page Navigation

Those who are bad at HTML modifications can use my one click installer :

  
After installing this widget proceed to the label fix.

The Complex Method.

 If you installed the widget you shouldn’t be here.. Scroll down to the label fix.
1.Login to Blogger Dashboard and navigate to Layout > Edit Html
2.Don’t click the checkbox which says ‘Expand Widget Templates’
3.Find This Code


]]></b:skin>

replace it with :


.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
]]></b:skin>

4.Next find this code :

</body>

and replace it with 

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->
</body>

As you can see,there are some customizable parameters in this code

var pageCount=5;

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

var displayPageNum=5;

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

var upPageWord ='Previous';
var downPageWord ='Next';

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

You can see my blog, it 100% work, lets try and good luck.