14 February 2013

Number Comment System for Blogger

In Blogger by Debarpan Mukherjee // February 14, 2013 // 3 comments

Here we strongly believe comment system is the most important part of any blog so we love to make tweak with this part of blogger.This is the most favourite part of us.We previouly already done several tweaks with blogger comment section..You can see this blog comment section,highly different from any other blogger blog.After doing any tweak we love to share that with our reader.So we love to produce tutorial on blogger comment system.So,Today we'll learn how we can add numbered comments along with comment bubbles on our blogger threaded comment system.You can see the screenshot as demo.

Must Read : Blogger Bubble Style Comment System

Add Number Comment System on Blogger

Navigate to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)
Now search(ctrl+f) 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(http://1.bp.blogspot.com/-6eXXeRC0Jtk/T4x8_1mb3II/AAAAAAAAAKI/5I4QHXPYmWM/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 are all done

Customization

remove the code in red (including the purple code) if you want to remove the comment bubble
to change the comment bubble, replace the code in purple 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

Must Read : Make Comment Divider on Blogger

Hope this will surely improve your comment section looks.If you find this tutorial helpful then don't forget to subscribe our rss feed.Thanks for visiting.Stay with us for more such awesome upcoming tutorials.