Comments Page Navigation Widget for Blogger

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. please leave your comments and suggestions and Share this Widget

Get paid to share your links!