14 February 2013

Number Comment System for Blogger

Number Comment System for Blogger
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


    • 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

    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.

    Articles You May Like

    3 comments: Leave Your Comments

    1. another great tutorial! i love the very accurate system you doing when doing tutorials! xx

    2. Thanks for making this easy for bloggers and providing the html codes. :)