How To Add Numbers To Blogger Threaded Comments

HELLO SHOAIB IT READERS!
TODAY THE TOPIC OF MY POST IS :
HOW TO ADD NUMBERS TO THE BLOGGER THREAED COMMENTS AND SORTED BY TOP COMMENT SYSTEM
\Today I am sharing a very simple CSS trick which will used to 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,you can see a screenshot below in image.To apply this trick to your threaded comments,you just have to copy and paste some CSS code in your template and you are done.So without waiting anymore lets go to the tutorial.
first of all follow these steps
1:goto blogger dashboard and then click on Templates
2:click on Edit Template
3:now search for this context

]]></b:skin>

Add below code just above it,

.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/AVvXsEjSM8SOY1vWP5n5yoIXh2WLWRZEvwZoG1dOrpf_Oq9ObhbGz0xpnil0V7pGswtHiWfBVjbYtvMgtVU-oqnlFY-eaOuC04xOQThrkAa4d8X-78L5QUpUWUnerQgUeaTFw837UGppvoY9S4s6/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;
}

save your template and trutorial is finished

Customizations

Line Number 11 - Edit it to adjust the position of text(number) from left size
Line Number 12 - By editing the value you can adjust the position of text(number) inside bubble from top.
Line Number 13 - If you want to change the bubble image then simply replace image URL with yours.
Line Number 14 - By editing this value you can adjust the position of bubble from top
Line Number 15 - Increase or decrease the value as per your requirements

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