How to Add Number to Blogger Comments!

Commenting is one of the best way to increase the visitors engagement with a site. Blogger has a default comment option. But it is very simple. As I always said that an attractive can attract more visitors. Beside customizing other thing you can customize blogger comments option as well. Earlier I had shared Several Post on Blogger Comment. In this post I am gonna share a trick by which you can add number on blogger comments.

DEMO:

This cools Blogger trick will add a comment count inside a speech bubble. As a result you and you'r readers can use the numbers to mention or point to a particular comment on any of your blog's posts. Beside that adding numbers to the comment can make your site more attractive.

Note: To apply this trick on your blog, First you need to remove the Blogger Threaded comments. See Here---> How to Disable Blogger Threaded Comments!

Warning: Before doing any kind of customization on your site's HTML page, I will recommend you to backup your site Template. To know more about Template backup Read This Post.

Adding Number to Comments in Blogger:

First Sign into your Blogger account and go to Dashboard.
Then click on Template and then click on Edit HTML button. You will land on the HTML page.
Here in the HTML page find the following code.

 <b:loop values='data:post.comments' var='comment'>

Then Paste the following code just before/above the above code.

 <script type='text/javascript'>var CommentsCounter=0;</script>

Then find this code <data:commentPostedByMsg/> and paste the following code just below/after it.

 <!--comments-count-starts-->  
 <span class='comments-number'>  
 <a expr:href='data:comment.url' title='Comment Link'>  
 <script type='text/javascript'>  
 CommentsCounter=CommentsCounter+1;  
 document.write(CommentsCounter)  
 </script>  
 </a>  
 </span>  
 <!--comments-count-stops-->

Now find </head> tag and Paste the following code just above it.

 <style type="text/css">  
 .comments-number a:link, .comments-number a:visited {  
 color: black !important;  
 text-decoration: none !important;  
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2TFbutu59NpuqAaD9moBxSAs9c86xAqeyfawArTN6855DBIbHBTtZgU52c7JrRTwtnGZt6YKZyZJuF7lTAOhWM6BSqatt6FjJg7DNpqWrDhd0aYmnH5APyE0-sZihfC5DWY3HcIAf9u39/s1600/comment+bubble+1.png) 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;  
 }  
 </style>

Finally click on Save Template button to apply the trick.

Customization:

To change the comment bubble, Replace the URL of above code show in the Red text. You can use following image URL or use your own.

To change the color of the number, Replace the Text in Blue of the above code with Hex value of your color. To get your desire colored code use this Color Code Generator.