Add Numbers on Blogger Threaded Comments

Hello, friends today we are sharing a very simple and useful CSS trick to add numbers to your threaded comments inside a comment bubble. It will add numbers like this way 3, 4, 5 and 3.a, 3.b, 3.c here 3,4 and 5 are the main comments and 3.a 3.b are the replies, you can see an image screenshot below. To apply this trick to your threaded comments, you just need to copy and paste CSS code in your template, and you are done. Let start adding numbers on threaded comments.

How To Add Numbers on Blogger Threaded Comments?

Go to Blogger Dashboard and choose the Template option.

Download a copy of your template for backup purposes.

Click On Edit HTML.

Click anywhere in the HTML area and press CTRL+F to find the below code.

]]></b:skin>

Now copy below css code and paste it just before of above skin tag.

.comment-thread ol {
counter-reset: countcomments;
}

.comment-thread li:before {
content: counter(countcomments,decimal);
counter-increment: countcomments;
float: right;
font-size: 22px;
color: #555555;
padding-left: 10px;
padding-top: 3px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBbf1666W44-ZTZLtXypqfhwtKXhQuK2nppBxGFM2nfKu8tUuvPjJgpWCnT7cAjezIGwo8Aslug_KV8lHY4ZlY4ukciTR97OYl2YZaqqTgFOVY3I3xrmeGBuhmD8rBL4MDvjfqpVDJN6iz/s1600/comment+bubble2.png) no-repeat;
margin-top: 7px;
margin-left: 10px;
width: 50px;
/*image-width size*/
height: 48px;
/*image-height size*/
}

.comment-thread ol ol {
counter-reset: contrebasse;
}

.comment-thread li li:before {
content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin);
counter-increment: contrebasse;
float: right;
font-size: 18px;
color: #666666;
}

Now save your template.

Customizations

Line Number 11 (Orange color) - Edit it to adjust the position of the text(number) from the left size

Line Number 12 (Yellow Color) - By editing the value you can adjust the position of the text(number) inside the bubble from the top.

Line Number 13 (Lime Color) - If you want to change the bubble image then simply replace the image URL with yours.

Line Number 14 (Aqua Color) - By editing this value you can adjust the position of the bubble from the top.

Below I am sharing some comment bubbles, right-click on any bubble, select Copy Image URL and replace it with the above comment bubble URL in line number 13.