How to number comments in Blogger/BlogSpot


Tutorials - Tutorials

User Rating: / 0

How to number comments in Blogger/BlogSpot

This cool Blogger trick will help you to add comment count inside a speech bubble, so that you & your readers can use the numbers to mention or point to a particular comment on any of your posts. Besides this, numbering your comments might help you to improve the look and feel of your blog.

Note: This works with the previous blogger commenting system, so if you want to apply this trick, first you need to remove the Blogger threaded comments. See here How to remove Blogger threaded comments
UPDATE! Now you can have a comment bubble in your threaded comments also! For more info, please read this tutorial: How to Add Numbered Comments In Threaded Comments
blogger blogspot, tricks

How to add numbered comments on our Blogger/Blogspot blog

how to blog, blogspot blogger

Step 1. From your Blogger Dashboard, go to Template and click on the Edit HTML button:

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box:

Step 3. Type or paste the following code inside the search box and hit Enter to find it:
<b:loop values='data:post.comments' var='comment'>
Step 4. Just above it, paste this code:
<script type='text/javascript'>var CommentsCounter=0;</script>
Step 5. The, find this code:
Step 6. And just below/after it, copy and paste this:
<span class='comments-number'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
Step 7. Find (CTRL+F) this tag:
Step 8. Just above the </head> tag, paste this code:
<!-- comments-count-starts-->
<style type="text/css">
.comments-number a:link, .comments-number a:visited {
color: black !important;
text-decoration: none !important;
background: url('/') no-repeat;
width: 50px; /*image-width size*/
height: 48px; /*image-height size*/
float: right;
display: block;
margin-right: 5px;
margin-top: -15px; /*comments-counter position*/
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 15px;
font-weight: normal;
.comments-number a:hover, .comments-number a:active {
color: #1BA0E1 !important;
text-decoration: none !important;
<!-- comments-count-stops->

  • To change the comment bubble, replace the text in red from above with your address
  • To change the color of the numbers, replace the text in blue with the hex value of your color. This tool can help you to pick up any color that you may need: Color code generator

Comment Bubbles 

To choose a comment bubble, right-click on the image and select "Copy Image Address/Location":

how to blogblogger blogspotblogspot blogger, how to blogwidget blogger blogspotblogs, how to blogblogspot or blogger, how to blogtutorials, how tocomments, how to, blogspot bloggernew comment, how to blogblog design,

IMPORTANT: You can use any image instead of the one linked in the code above (STEP 8) but after you need to change the size values (width and height), so that the numbers inside the bubble won't float outside of it.

Step 9. Save the template and enjoy your comments :]

Related tutorial: Add a Comment Bubble to Blogger Post Titles

About Us

Royal Developer Top three Web Designing and Web Development Company in Dehradun, Uttarakhand, India. Royal Developer Best SEO Company in Dehradun takes pride in its philosophy of 'Employee First' which empowers to create a real value for the customers. Royal Developer can offer Best and cheap Website Development Software Development & SEO Services. We are the Best service Provider of SEO, SEM, SMO Services Company in Uttarakhand. Web Designing Course in Dehradun, Web Designing Classes in Dehradun, Web Design Training Institute in Dehradun, Web designing institute in dehradun, Best institute for web designing in dehradun, Web development training in dehradun, Web development course in dehradun, Web Designing Training in Dehradun.


- Contact Information - 

Add : RDIT Services Pvt Ltd, 3rd Floor, RGM Plaza, Above Chandu Canteen,
          23 Chakrata Road, Dehradun - 248001, Uttarakhand, India

Email : 


 : +91 8171200108, +91 8979462451,
                                  +91 7895753921

Quick Enquiry Form

Enter your full name

Enter your valid email address

Enter your correct mobile number

Invalid Input

Your Message
Invalid Input

Enter Code
Enter Code
  RefreshInvalid Input


You are here: Home Tutorials How to number comments in Blogger/BlogSpot