Page NavigationPage navigation on Blogger is a nice and long await feature. You may see in different Wordpress or Joomla site with page navigation. But on Blogger it is not set by default and you have to set by customizing code. It will definitely give your site a good shape. Moreover, it is very important for a website or a blog. By page navigation, a visitor can find older or a specific page very easily and it will help you to keep visitor on your site for long time and you can expect more page view as well.

So here I have given the code of page navigation and show how you can set it on your site step by step. Just follow those steps:

1. Go to blogger.com and log in to your blogger dashboard.

2. Now go to Layout > Edit HTML

3. Do not click the checkbox where says "Expand Widget Templates"

4. Now find the code below:-

]]></b:skin>

5. Now past the code given below just before the code you have found [CSS Part].

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

Page Numbered Navigation

6. Next find the code given below:

</body>

7. Copy and past the code given below just before the code you have found [JavaScript Part].

<!--Page Navigation Starts by www.dooas.com-->
<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://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends by www.dooas.com-->

8. Save the template.

You are done and refresh your page to see changes.