How to add Numbered Page navigation in blogger blog

Hello guys ,We at TechiOtaku believe in simplicity and elegance ,Often bloggers find it difficult to manage the pages and posts when they have hundreds or thousands of blog posts posted everyday,so to do away this problem TechiOtaku teaches you how to do it...

Page Navigation is a really awesome and long awaited feature. You might have seen numbered page navigation on many wordpress blogs. .Here is a little screenshot of what this is all about.

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

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

 This is the CSS part which defines the look and feel of the page navigation.You can modify it according to your need

4.Next is the JavaScript part. Find

</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.
Label Fix
Now we have another problem.By default,the blogger label pages will show 20 posts.We will have to cut this down to the value that we gave for the variable pageCount (or the posts per page).For this we will have to edit our template
How to Edit the template to cut short the posts per page?
Go to the Edit HTML page and expand the Widget Templates
Now find each occurrence of
'data:label.url'
(including the quotes) and replace each of it with

'data:label.url + "?&max-results=5"'

 Now you should have the Blogger Page Navigation working perfectly on your blog. :)

 For more help and info you can comment here on Techiotaku or visit this

 Thanx for reading this tutorial.. now share it..with your blogger friends,for more tutorials and stuff go here

Posted in: Blogger Tips