Hack Sperm

Numbering Navigation Widget is very useful for blogs because it tell the visitors that how many pages this blog has and from those pages the visitor can calculate that how much posts this blog contain.

This widget is place at the bottom of the template where "Newer Posts" and "Older Posts" are shown.
It looks like this:



Follow the instructions to place this widget on your Blog.

1. Go to Your Blogger Dashboard.
2. Click on Design Page.
3. Now, Navigate to Edit HTML tab

Better not to check the box "Expand Widget Templates"

4. Now, search for the term   ]]</b:skin>
Copy and paste the following code just before ]]</b:skin> 

    

.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;
}

This is the CSS part of the widget which defines the properties and work of your widget (Navigation Widget).

Now, its time to add the HTML code of the Widget.
So,

5. Find   </body>. And copy the following code and paste it just before the  </body>

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

Save Your Template and Your are done. You can see the Navigation Template in your Blog.

Customization :

var pageCount=5; : This code determines the number of posts that displayed on each page

var displayPageNum=5; : This code determines navigation numbers displayed on the page navigation widget(like 1 2 3 4 5 ...).

var upPageWord ='Previous';
var upPageWord ='Next';
These lines of code is for for Previous and Next page link.(Previous 1 2 3 ... Next)