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.

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://bloggerblogwidgets.googlecode.com/svn/trunk/w2b_commentspagination.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. please leave your comments and suggestions and Share this Widget.

This is a Quick Trick to Show the Blogger Comment Avatar Image Properly. I saw in many blogs Comments avatars. those are Improper in size. This is because of the CSS of both Default Comments System and Threaded Comments. which are present in your template and showing the avatar image improperly. here is the Quick Tip with css to Reset the Avatar image and Style the Image.

How to Fix The Improper Blogger Comments Avatar Image?

This is Reset CSS for Comment Avatar Image and is works for both Default Comment System and Threaded Comments System.

1. Login to Blogger Dashboard > Choose your Blog and Click the More Options Dropdown
2. Select the Template > Click on Edit HTML > Proceed
3. Search for ]]></b:skin> and place the below code before it!

   .avatar-image-container,
   .avatar-image-container img{
    max-width:50px !important;
    width:50px !important;
    max-height:50px !important;
    height:50px !important;
    padding: 0 !important;
    border:0px;
   }

   Note: Default size it set to 50px. if you want Change the avatar size then simply modify the above CSS.

How to Rounding the Blogger Comment Avatar Image?

In comment someone asked me to Rounding the Avatar image in blogger comments. here is the CSS for it!
this css will reset the avatar size to normal and rounds the Image.(so don’t use the above CSS)
Search for ]]></b:skin> and place the below code before it!

.avatar-image-container,
.avatar-image-container img {
 max-width: 50px !important;
 width: 50px !important;
 max-height: 50px !important;
 height: 50px !important;
 padding: 0 !important;
 border: 0px;
 -webkit-border-radius: 999px;
 -moz-border-radius: 999px;
 border-radius: 999px;
}

.avatar-image-container{
 border:3px solid #fff !important;
 -webkit-box-shadow: 0 1px 2px #BBB;
 -moz-box-shadow: 0 1px 2px #BBB;
 box-shadow: 0 1px 2px #BBB;
}

Note: Default size it set to 50px. if you want Change the avatar size then simply modify the above CSS.
If this post is helpful to you? then please share it! Thanks!.