Numbered Page Navigation For Blogger

Numbered Page Navigation is essential for having many post which could be difficult to display in one page. It is easy for users to navigate through all of your Blog and watch out your every particular post. By default Blogger have not added any such feature in Blogs. But, we can easily integrate Numbered page navigation by simple script.

Let's see what we need and how we can add Page naivation in Blogger Blog.

How to Add Numbered Page Navigation:

• Login to Blogger Dashboard and navigate to Layout > Edit Html.
• Now find, find press ctrl + F.

]]></b:skin>

• Past below code above ]]></b:skin>

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

• Then look up the code </ body> and add the following code on it:

<!--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='https://bloggerknown.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>
<!--Page Navigation Ends --> 

• Click on save and enjoy blogging.

Note: You can change the number of Page Coune and Display Pager Number according to your setting which is highlighted above