SimpleBloggerTips: Add Numbered Comments on Threaded Comments for Blogger V2

Recently i posted about Add Numbered Comments on Threaded Comments for Blogger V1 now today we'll learn how we can add numbered comments along with comment bubbles v2 on our threaded comments too.To add you have to do this following CSS trick given below.

                                

Add Numbered Comments on Threaded Comments for Blogger  V2

• Log in to your Dashboard  > Template  > Edit HTML 
• Now Click on "Expand Widget Templates"
• Using "Ctrl+F" search the following code: 

]]></b:skin>

• Add the following 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/AVvXsEgfI7bgyX_BS9_xk13dwvjMjt_C_vnkgOo8BKzauv5IXdiDwYhjgjMsOLgWcaAOaRmnk7Y-tDgvLFlnTaWuRT5ayn0Ru0ONYLDgqdY8DS3B9larVhZ5vsmAcRV1IAaZ85cYB7t2E2rXY28T/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;
}

 Note:

• If you want to remove the comment bubble remove the code in red (including the blue code)
• to change the comment bubble, replace the code in blue with the URL address of your own icon.
• to change the position of comments count, increase/decrease the values (3 & 10) from padding-top and padding-left
• to change the position of comments bubble/icon, change the values (10 & 7) from margin-left and margin-top
• Now save the template and you're done!