How to Do This?
- Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)
- Now search for ]]></b:skin> and above it paste the below code.
.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/AVvXsEi0Ce0Dxj8VlGnOVQfHrhduZh9hSXSb0txGbQwIGwFwtDgcc1M2m-QWnJ2KCpyjvj9riAn7-xFebCRvta2Z6b3eQNe2GVhiBfWOn4Fh_NW2jlvoMCl3_wvjEXCmhUHJsh-Gmg6NM84Vmjml/s1600/blue.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 the template and you're done
Customization
- remove the code in red (including the blue code) if you want to remove the comment bubble
- 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
If this helped you then please don't forget to subscribe our rss feed.Thanks
Post a Comment