You are Here → Home » Blogger Comments » New Comments Page Navigation Widget for Blogger / Blogspot

New Comments Page Navigation Widget for Blogger / Blogspot

by in Blogger Comments, Blogger Widgets

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

Comments Page Navigation Widget Default Style

.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

Comments Page Navigation Widget Dark Style

.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. :)

Comments

  6. says

    Harish i have found you host the code in Google Code.How did you set File:mime .I use totorise SVN but is there any alternatives.
    In last line thanks for this awesome widget.

  7. Aakash says

    My dear friend Harish!

    Have any fix for in threaded comments. I was expected this long time ago. Now you’ve proved a real hero. We need both threaded comments with comment navigation.

  15. says

    what we do when more than 200 comments in a blog post or page ?
    they are not visible in my blog …!!

    any solution ?

    please check this page .. it contain 204 comments yet …

    http://malayalambloghelp.blogspot.com/2010/01/blog-post_02.html

    • says

      Hi Noushad!
      This hack for Blogger Default Comments system. you have threaded comments system, so it won’t apply.
      For threaded comments system, you have a link to load more comments.
      If you have any problems, come on to chat! :)