Show Numbering Comments (Comment Numbers) in Blogger

By -

Blogger template can be highly customized if you know how to do this! You can change the look, feel and presentation by making small changes to your blogger template. You have might have seen WordPress blogs that displays comments with numbers. There are several WordPress plugins for comments section to customize, but now you can also show comments on blogger posts with numbers. By applying numbering comments hack to your blogger template, you add a special identity to each comment and it makes the comments section look professional.

comment numbers in blogger


Add Numbering Comments or Comment Numbers hack to Blogger Comments section

  1. Login to your blogger dashboard.
  2. Navigate to Page Elements >> Edit HTML >> Expand Widget templates
  3. Search for the following codes inside your template and add what is highlighted.
  4. <b:includable id='comments' var='post'>
    
    ........
    
    <dl id='comments-block'>
    
    <script type='text/javascript'>var CommentsCounter=0;</script>
    
    <b:loop values='data:post.comments' var='comment'>
    
    <dt style='clear: both;' class='comment-author' expr:id='"comment-" + data:comment.id'>
    <a expr:name='"comment-" + data:comment.id'/>
    <b:if cond='data:comment.authorUrl'>
    <a expr:href='data:comment.authorUrl' rel='nofollow'>
    <data:comment.author/>
    </a>
    <b:else/>
    <data:comment.author/>
    </b:if>
    <data:commentPostedByMsg/>
    
    <span class='numberingcomments' style='float: right; font-size: 20px;'>
    <a expr:href='data:comment.url' title='Comment Link'>
    <script type='text/javascript'>
    CommentsCounter=CommentsCounter+1;
    document.write(CommentsCounter)
    </script>
    </a>
    </span>
    
    </dt>
    
    <dd class='comment-body'>
    .......
    </dd>
    
    </b:loop>
    </dl>
  5. Note that you have to add the highlighted codes only. You can change the font size to suit your template.
  6. Now we are done with the basic set up. Let’s add some style to it by customizing the CSS part.
  7. Search for ]]></skin> inside your template. Add the following code just above it.
  8. .comment-number {
    float: right;
    background: url(http://i40.tinypic.com/14tmp9e.jpg) no-repeat;
    width:50px;
    height:50px;
    margin-right: 15px;
    margin-top: -35px; /*comments-counter position*/
    text-align: center;
    font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
    font-size: 18px;
    font-weight: bold;
    }
    
    /*since the numbers are actually links, we need to force the color properties*/
    
    .comment-number a:link, .comment-number a:visited {
    color: #445566 !important;
    text-decoration: none !important;
    }
    .comment-number a:hover, .comment-number a:active {
    color: #FF9933 !important;
    text-decoration: none !important;
    }
  9. Save your template to reflect the changes we have made.
  10. You are done.

If you face problems like image counter not aligned to the proper place, you can play with the comments counter position until it gets aligned to proper location. You can edit the following lines in the above code and keep trying until it looks perfect :

margin-right: 15px;
margin-top: -35px;

Now numbering comments hack has been implemented and your blog should display all comments with numbers. If you face any problems, don’t hesitate to use the following comments section.

Soumya is the admin and founder of Techcular. He loves to discover and learn new things on Internet. You can find him writing on his personal blog few times.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

What is 15 + 12 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)