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?
- Go to Blogger > Template > HTML > Proceed and check Expand Widget Templates
- Search for this code
- Place the Below Code AFTER it.
- Find this code
- Add this style code BEFORE it.
- Save Your template and you're done with it.
<b:includable id='comments' var='post'>
<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>
]]></b:skin>
.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; }