Blogger Navigation - Page Numbers for Comments

Earlier we enjoyed blogger page navigation for posts, now we have a navigation system for comments. By default, Blogger shows 200 comments per page and show navigation links (oldest,older,newer and newest) at the top and bottom if you have more than 200 comments on any post. If you don't like the default navigation system and want to place page navigation with numbers, this is very useful widget for you.

Important Point

• Comments navigation only works if you have more than 200 comment in your blog post.
• Comments navigation will not works for Threaded Comments. As threaded comment system Loads old comments with the help of AJAX

How to add Comment Navigation numbers?

1. Go to Blogger > Template > HTML > Proceed and check Expand Widget Templates
2. Search for this code
<b:includable id='comments' var='post'>
3.  Place the Below Code AFTER it.
<b:if cond='data:post.commentPagingRequired'>
<script type='text/javascript'>
var w2bTotalComments =
<data:post.numComments/>;
var w2bPrevBtnText = "Prev";
var w2bNextBtnText = "Next";
</script>
<script type="text/javascript" src="https://folsol.googlecode.com/files/folsol_commentspagination.js"></script>
</b:if>

4. Find this code 
]]></b:skin>
5. Add this style code BEFORE it.
.w2bCommentsPaging{
font-size:12px;
display: block;
}
.commPageOf{
padding:5px 10px;
margin-right:6px;
}
.commPrev a,.commNext a,.commentNum a {
text-decoration:none;
background: #4E4E4E;
padding: 5px 10px;
margin: 0 4px;
text-decoration: none;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.commPrev a:hover, .commNext a:hover, .commentNum a:hover, .commentNum.commCurrent a{
background:#8956B8;
color:#fff;
}
.paging-control-container {
clear: both;
display: block;
float: none;
font-size: 80%;
margin: 10px 0;
overflow: hidden;
padding: 10px 0;
text-align: right;
}

6. Save Your template and you're done with it.