Solving 200+ comments display problem

Blogger only shows the first 200 of your comments in the (first) post page. The next 200 comments are supposed to be displayed on the second page, another 200 on the third page and so on.

When your comments count for a post exceeds 200, Blogger will automatically add a pager, so you can navigate between comment pages. But in some cases (due to third party template maybe?) no pager is added.

That’s what happened to me when one of my posts did exceed 200 comments. From the comment count (see picture above) I knew I have 202 comments, yet I could not access/view the 201st and beyond comments because the pager was nonexistent.

After some Firebugging on blogs that do have the comments pager on and a follow up search into good ol’ Minima template code, I finally found the comment pager code. Here it is:

<b:if cond='data:post.commentPagingRequired'> 
  <span class='paging-control-container'> 
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a> 
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a> 
    <data:post.commentRangeText/> 
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a> 
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a> 
  </span> 
</b:if> 

Now we want to display the pager at the beginning of the comment section, right before the comment block (where all comments are listed out). You may also want to display it one more time near the end of comments section, right before comment footer.

 

1. Display at the beginning of comment section

1. Login to your Blogger account.
2. Go to Dashboard > Design > Edit HTML.
3. Back up your template.
4. Tick the  Expand Widget Templates check box on top right of the HTML window.
5. Look for following lines in your HTML code and paste the comment pager code right before it.

PASTE COMMENT PAGER CODE HERE
<dl expr:class='data:post.avatarIndentClass' id='comments-block'> 
  <b:loop values='data:post.comments' var='comment'> 

The exact code may differ slightly and your template may have more than one places where comments-block are used. To avoid mistakes, make sure this two keywords are there:  <dl> tag and the whole code in line 3.

 

2. Display at the end of comment section

Look for following code lines and just insert the comment pager code as indicated. Again the code below may vary from template to template. You may find more than one places where comment-footer are used. To avoid mistake, make sure you can find comment-footer and data:postCommentMsg (line 11) in the code.

PASTE THE COMMENT PAGER CODE HERE
      <p class='comment-footer'>
        <b:if cond='data:post.embedCommentForm'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='comment-form'/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        <b:else/>
          <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
          </b:if>
        </b:if>
      </p>

 

3. Styling the pagers

To style the section, you simply add a styling rule in CSS, like this: 

.paging-control-container { 
/* add styling declarations here */ 
}

And place it before ]]></b:skin> line in your template code.

Enjoy!