How To Add Numbers To Blogger Threaded Comments

Customizing your comment box is somewhat tricky in order to let your readers drop a comment to your post.One of my previous post features on how to customize author's comments background  comments box but it doesn't contain any numbers to distinguish how comments being dropped in that particular post.  Today I will share to you  a  simple CSS tweak which will add numbers to your threaded comments inside a comment bubble.It will add numbers like this way 3,3.a,3.b & 4 here 3,4 are the main comments and 3.a,3.b are the replies. In order to apply this trick in your threaded comments, you just simply follow the simple steps below!

Add Numbers To Blogger Threaded Comments

Step 1. Go to Blogger Dashboard
Step 2. Hit the Template buttom (have  a copy of your template and save it in a safe place)
Step 3. Click On Edit HTML
Step 4. Now search or Control F for the code below

]]></b:skin>

Step 5. Just above that code in step 4 place the following code below

.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/AVvXsEhUnwmT_NvmM4LZmzIyvXQy7GufnX9yDju79oP48oaAfAlwmRZEvnR3qHrylXjKE95if2XYFuu9LZG4Y1MsJtl__nA5SFDQfkreOzAvDsRFoInRrEE_o5RPzX8atADZHBGjVKRaRA_ZIDNF/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;

}

Step 6. Save your template and congrats! Enjoy ;-)

Customization:

• To adjust the position of text (number) from left position, edit the value (padding-left: 10px)
• By editing the value ( padding-top: 3px ) you can adjust the position of text (number) inside bubble from top position.
• By editing the value attributes ( margin-top: 7px ) you can adjust the position of bubble from the  top position.
• Increase or decrease the value ( margin-left: 10px ) as per your requirements in order to adjust the position of the bubble from the left position.
• If you want to change the bubble image then simply replace image URL with yours. Or you choose one of the url below to replace your comment bubble image.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglyaAEf0G66O1CvudnWV8a05hT_zSowr65AzZ9AFh8JB3ANkBudrkTqe3GwCjww-Ed9tW-9LVfURqRYh00Y_dXlJ4Fxv1ASaH38l9lqMf_Bk_phTaKscFpVHjdOUrx2MHIIJtT0SVYbPU/s1600/devil+comment+bubble.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheNX3IS6xZOYOiYfaXS8cMsdtD7iHk-WM1MbIC44gjkH2ZRR_e2qPHpZzcA-CVoB5SWara1BAUPG-3xAkgjtvrGC01Zigeyd0QZ471cQK_8JlN4Q86yWDf3LQBJJ92oGiChOt9FD2HNhY/s1600/text_comment_bubble_comments.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht999MNM0JO-WvVgEfMTDqpXB2COaVGeQJr0uUI2zA_6AErRee8MAFvB5bsvNDPPaLxUZCGIYW44BWqh29CVQZlnknkZfbz9WjLk9kdpXvpAj-J6aU3zsLBJcbnI9RiEDyQLUKydKOhZg/s1600/comment_bubble.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF14o0Rs3ghlfu5ivRE-ILyTHIbPtFuyYWYMdVu_QaJ6NYKHMkPOZyw0pHbYBloaxW56B-DIWJieICOqtk25eox2u5IrZ4dvi0TJiy2zLQeEKDTNahQpAFNCcdZlgYjLGQWf5M_q6zpjs/s1600/bubble+comment.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidC7eadQ3na6umIPFBmIm8Wb1Dzdt-XGF1oiFdQlme7IEHVSwH7W2GdbCiBH30-JpmzGX2YMYqE4GmYMgOxFKZxExvFYJCoX3XmlDzb2MLZQUhURK0T6-i2PiTJF53WgHNoXTBSZAdXGU/s1600/comment+bubble+red.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgssmIkywtS7thyZsu6zAOu2yCjM2Roy8_Q02L8_AiMJG6PROARFy365yv0jfBC81d6kg0KMaGhv6Ls-feOSiZHXmckjxZ2F5stuCkiyomFbNnItpcgccShDzGTgeiEzAfxB3Se8ixlL9k/s1600/heart+1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb3uG-bSsUQgSsUTznUUNHhh8PwM0dgIurJCXP0VPWHXnVk1L-aTik-Z6FKoZ7S4pVcb6maKh6ib8n5OJ8_bn7OvphahIEVYngPI1Kqzlq4I2xE3N3hz-JW8vZ4ZfPwH8Omk9cg97APvk/s1600/pink+bubble+icon.png

I would say thanks  to helperblogger for the initial codes in this tutorial.