Enable Auto Numbering For Threaded Comments In Blogger

Threaded comments in Blogger blog is a great approach to interact with your readers and subscribers. It allows replying individually to the certain reader with many other awesome features. You might have noticed that in different professional blogs that many bloggers have customized the layout of their commenting system by adding some nice-looking options like changing the avatars, ribbons and auto numbering etc. Today in this tutorial we are going to share with you that how you can add the Auto Numbers and see the Comment Counts beside each comment in your blogger blog. It gives a very professional look to your blog commenting system and let the visitors know that how much you are eager to apply different styles to your blog and make it look exceptional. By following the tutorial below you can apply this approach very easily and perfectly.

How It Works?

Blogger blogs uses threaded commenting system which hold the <li> tag and the <ol> tag for displaying comments in well-ordered manner. In the blogger threaded commenting system the COUNTER-RESET property sets the value to zero and COUNTER-INCREMENT property increases the value by one. You can see the live demo by clicking the button below:

DEMO

Enable Auto Numbering For Threaded Comments In Blogger:

To enable the Auto Numbering for Threaded Comments in Blogger you must have first enable the Threaded Comments In Your Blogger Blog.

• Check Out Here: How To Enable Threaded Comments In Blogger

Now Lets Start Counting Comments:

1. Log-in to your Blogger Dashboard.

2. Go to Template > Backup. (Click Here To See, How?)

3. Now click “Edit HTML.”

4. Inside the “HTML EDITOR”, Press CTRL+F and search for </b:skin> tag.

5. Copy & paste the following code just above </b:skin> tag.

/*----- Comment Counter Starts -----*/
.comment-thread ol {
counter-reset: mbt-comments;
}
.comment-thread li:before {
content:counter(mbt-comments);
counter-increment: mbt-comments;
font-size: 30px;
float:left;
position:relative;
top:0px;
left:-10px;
margin-right:0px;
height:100px;
margin-right:0px;
font-weight:bold;
font-family:arial, georgia;
color: #666;
}
.comment-thread ol ol {
counter-reset: mbt-comments-sub;
}
.comment-thread li li:before {
content: counter(mbt-comments) "." counter(mbt-comments-sub,lower-latin);
counter-increment:mbt-comments-sub;
font-size: 12px;
color: #666;
position:relative;
top:10px;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content
{
margin:0px 0px 8px 28px!important;
}
/*----- Comment Counter Ends -----*/

8. Click “Save Template”.

You are all done, refresh your blog to see the Auto Numbering With Threaded Comments In Blogger.

Note:- 

1. To change the SIZE and COLOR of comments count in main section, edit font-size: 30px; color: #666; highlighted in Yellow color.

2. To change the SIZE and COLOR of comments count in main section, edit font-size: 12px; color: #666; highlighted in Orange color.

3. Nested replies are counted in the order 1.a, 1.b, 1.c which is the lower-latin format. You can change this format to different styles which are as follows: 

• lower-greek, 
• circle, 
• square, 
• disc, 
• lower-roman,
• upper-roman etc.

That’s All.

Happy Blogging.

Need Help?

Hope this new approach to blogger threaded commenting system may occur in a positive change for your blog. Don’t forget to spread this knowledge with your friends and subscribe at our blog for more updates. If you need any help, please feel free to ask by leaving your comments below and we will try our best to answer and will be great honor for us. Peace, blessings & cheers.! :)