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.

14 Comments to Show Numbering Comments (Comment Numbers) in Blogger

  1. I am having issues with this. It is only numbering my comments, and not all comments posted. Can you please help!!?

    Thank you!

    Layla

  2. @ Layla : This hack is to assign numbers to each comment. However, it should show total number of comments on Blogger homepage and labels page. Check if you have followed all steps properly.

  3. Hi Bapun,

    I followed all steps. If i send you a copy of my script, can you help me?

    Please email me at couponjourney @ gmail . com

    Thanks,

    Layla

  4. I have done all of this over and over and I still can't get it to work. Can you help me? I have giveaways that I need to find the winners by number..pls help!

  5. Hello friend! I have a different code in my HTML than what you have above so I have no idea where to put the highlighted codes. Would you mind helping me as I also need my comments numbered for giveaway purposes. Please email me at the address provided and I'll show you the HTML! Thanks!!!

  6. I, like Joy have a different html code and am having trouble. If there is any way you could help me that would be great. I am sending you an email. Thanks:) LissaL

  7. Hi! I am trying to add the numbers to my friends blog. It worked fine on mine, but when I add the CSS codes it shows it at the top of her blog and doesn't show any numbers in the comments section. Could you please email me and let me know what might be wrong?

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 12 + 15 ?
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) :-)