NEW COMMENTS PAGE NAVIGATION WIDGET FOR BLOGGER / BLOGSPOT.

There are times when we get a lot of comments on our Blog's post, and it becomes very difficult for the page to get loaded. The page becomes slow eventually. The most efficient solution for this is, pagination of comments. That is dividing comments into chunks and showing them with different urls, that is by adding page numbers to them.

This can also be achieved by using Ajax, but that is a bit tricky when we are working with blogger. So lets keep it simple, fast and good.
All you have to do is some copy paste and updates, and by the end of this tutorial your blog will be more managed, and fast with its comments under pagination.


NOTE :

• 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.

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, by pressing ctrl+F

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

Place the Below Code after it!

1. <b:if cond='data:post.commentPagingRequired'>
   <script type='text/javascript'>
    var w2bTotalComments = ;
    var w2bPrevBtnText = "Prev";
    var w2bNextBtnText = "Next";
   script>
   <script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b_commentspagination.js">script>
   b:if>

Save the template after it.

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

We can also style our pagination buttons using CSS,

This Pagination widget comes with two Different Styles.
Add the any One style code Before ]]> 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. 

Courtesy : Way2Blogging