13 March 2013

Add Comment Counter on Blogger Threaded Comment

// // 9 comments

After waiting several times we got threaded comment system for blogger just like wordpress ,but still we  all know blogger comment system is not so advance like wordpress,so it may distract your visitor from commenting on your blog.You may gonna loose traffic for that as well.So,we need a little customization to make it attractive.Do something new,something great to make it attractive.So we decided to make it attractive by putting an attaractive comment number system.If you wanna saw a Demo then take a look on the below screenshot.



We guess you're going to  like it.So,here am going to tell you how to do that.




Add Comment Counter on Blogger

  • Go to blogger dashborad >> select a blog>> click template >>edit HTML >> proceed >> expand widget template
  •  Search for “]]></b:skin>” and above it paste the below code




.comments-number { position: absolute; top: 55px; left: -48px; border-radius: 3px; background: #D80556; width: 20px; height: 20px; width: 30px; font-size: 15px; line-height: 1em; color: white; text-align: center; } .comment-thread ol { counter-reset: countcomments; } .comment-thread li:before { content: counter(countcomments,decimal); counter-increment: countcomments; float: Centre; color: #555555; padding-left:10px; padding-top:3px; position:relative;top:40px;Right:63px;border- radius:3px;background:#D80556;height:20px;width:20px;font-size:15px;line- height:1em;color:#fff;text-align:center margin-top:7px; margin-left:10px; } .comment-thread ol ol { counter-reset: contrebasse; } .comment-thread li li:before { content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin); counter-increment: contrebasse; float: Centre; font-size: 15px; } color: #fff;}


  • Then search for

(function() { var items = <data:post.commentJso/>;





 

and replace it with



var items_copy=[]; (function() { var items = <data:post.commentJso/>; items_copy=items;






  • Then search for



<data:post.commentHtml/>




  • Below it paste the following code



<script type='text/javascript'> //<![CDATA[ for(i=0;i<items_copy.length;i++){a=document.getElementById('c'+items_copy[i].id);b=a.innerHTML+'<span class="comments-number">'+(i+1)+'</span>';a.innerHTML=b} //]]> </script>












  •      Now save the template and you’re done

        Must Read : Enable Blogger Threaded Comment System

Hope you liked it and wish to make a try on your blog.If you face any kind of problem don’t be shy to ask using the comment box below.Thank you.

Articles You May Like

9 comments: Leave Your Comments

  1. I think this would make commenting a lot better and would also look better.

    ReplyDelete
  2. Cool... i think I need to try this :)

    ReplyDelete
  3. I'll try this one soon. It looks so cool! :D

    ReplyDelete
  4. very nice!! i have put a counter as well to my blog like this since i wanted to be updated with my comments in each of my post great idea! xx

    ReplyDelete
  5. Yeah, I really do find Blogger's commenting feature difficult. For one, it doesn't work on my chrome browser. Have to open blogger blogs on Firefox to make it work :(

    ReplyDelete
  6. Wow, that trick seems neat! :) I'd like to try that too!

    ReplyDelete
  7. very useful this one indeed. Masubukan ko nga to sa site ko :)

    ReplyDelete
  8. Thanks for your sharing, I love this tip. I will apply it for my blogger blog! :)

    ReplyDelete