New Comments Page Navigation Widget for Blogger / Blogspot

New Comments Page Navigation Widget for Blogger is a Widget for your Comments. By Default Blogger Comments Page have page navigation links(Oldest, Older, Newer and Newest) at top and bottom of Comments section. While Blogger Upgrading to Threaded Comments, this comment pagination links are disappeared. But now they are working fine. however, If you does’t like to Use the Default Pagination links for Comments pages this widget is so helpful to you.

• This widget only works When you have more then 200 comments in your Blog Posts.
• This widget is not works for Threaded Comments. As threaded comment system Loads old comments with the help of AJAX.

Preview

How to Integrate Comments Page Navigation Widget in Blogger ?

1. Go to New Blogger Dashboard > Click the More Options drop-down and Select the Template
2. Click on Edit HTML button and Click on Proceed button
3. Check Expand Widget Templates checkbox
4. Search for the below line of code

   <b:includable id='comments' var='post'>

5. 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="http://widgets.way2blogging.org/blogger-widgets/w2b-comments-pagination.js"></script>
   </b:if>

6. Save the Template

You have option to change the next and prev links text.
var w2bPrevBtnText = "Prev"; Previous Button link text
var w2bNextBtnText = "Next"; Next Button link text

Adding Styles

This Pagination widget comes with two Different Styles.
Add the any One style code Before ]]></b:skin> tag

Default Style Preview

.w2bCommentsPaging{
 font-size:13px;
 display: block;
}
.commPageOf{
 padding:4px 8px;
 margin-right:6px; 
}
.commPrev a,.commNext a,.commentNum a {
 text-decoration: none;
 border: 1px solid #ddd;
 background: #efefef;
 padding: 4px 8px;
 margin: 0 4px;
 text-decoration: none;
 color: #666;
 -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
 border-radius: 2px;
}

.commPrev a:hover, .commNext a:hover, .commentNum a:hover, .commentNum.commCurrent a{
 border:1px solid #CDCDCD;
 background:#ddd;
 color: #222;
}
.paging-control-container {
 clear: both;
 display: block;
 float: none;
 font-size: 80%;
 margin: 10px 0;
 overflow: hidden;
 padding: 10px 0;
 text-align: right;
}

Dark Style Preview

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

I hope this widget is useful to you.

---

Need more Customisations ? Comment your combinations
Below and We will add that in this post as soon as Possible

---