Add Auto Comment Count Below Post Titles in Blogger

auto-comment-countComment bubbles or comment links are often added to blogger templates to let readers now how popular a post is and what kind of hot discussion is going on. I am sure almost every template has this feature by default but with a incorrectly programmed code. If you observe carefully the comment count links under each of my post titles follow a order. When there are no comments posted the link says “Be the First to comment!” and when there is just one comment it says “1 comment so far” and when the comments are more than one then it says “x comments so far” . This makes things beautiful and professional. Most of the comment count links on blogger templates just show the same text irrespective of the number of comments posted. You must make sure you encourage readers to post their views by using different variations of bubble texts. Lets add this automatically working comment link just below post titles along with a comment bubble.

 

How To Add Automatic Comment Count Link

  1. Go To BLogger > Design > Edit HTML
  2. Backup your template
  3. Click the Expand Widgets Template box
  4. Search for this,

<div class='post-header-line-1'>

If you could not find it then search for this code instead,

<data:post.title/>
        </b:if>
     </b:if>
      </h2>
    </b:if>

 

and just below anyone of them paste the code below,

<span class='post-comment-link' style='Float:right;'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:post.allowComments'>
            <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSGdESqcbUOC3YWHxnn2s556fHwQIt2sMtpH7tvabu3n89QwIy0QJ33cixHS6J71958LSbD_5ezfAj8aOzUK9uHLa20aSRGvrtyDxzhEjsBmTDK-Y9vZqjCuAh8LlLvc4uMzsOCWKbSg0f/s400/icon_comments.png) no-repeat;Padding-left:20px;'><b:if cond='data:post.numComments == 0'>Be the first to comment!<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Comment so far<b:else/><data:post.numComments/> Comments so far</b:if> </b:if></a>
          </b:if>
        </b:if>
      </span>

 

 

You can replace the bolded text with anything you like or you can simply keep it as it is. If you wish to change the comment bubble image with one of yours then simply change the highlighted yellow image link with your bubble image link.

 

     5. Save your template and view your blog to see it in action.

The link will appear only on homepages. If you wish the link to appear even on post pages then simply delete the purple text. Have Fun! :>

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

15 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Hello,

    Mohammad, please share live demo of this trick. Thanks

    ReplyDelete
  2. Hii mustaffa thanks for sharing simple but effective modification of comments. following simplicity and giving extraordinary features is the main characteristics of your blog . It is one of the reason for the authority of you and this blog in blogger world. At last thanks again. If you are not busy would you plz mail me the copy of Monop template at my e.mail id: truelyvishal(@)gmail.com
    Happy Ramzaan and may god bless you more success in your personal life and carrier.

    ReplyDelete
  3. @Hetal Patil RawatThis feature is already live on mybloggertricks. You can demo the feature by viewing posts of this blog. u can demo the feature by viewing posts of this blog.

    ReplyDelete
  4. @Vishal Srivastava

    Thanks for pointing out. I was expecting something new.

    ReplyDelete
  5. Thanks brother mohd. You kept your promise. I was waiting for this post you know !!!. Thanks for posting this post .Yes like Hetal said i would like to see few demo with bit of variations .
    Thanks again
    sis
    Manisha

    ReplyDelete
  6. Nice post bro.. good to see you back in action :) please now would u post the tutorials i told u??? im still waiting...

    ReplyDelete
  7. @hetal @Manisha

    I would love to know what variations would you like. Please also share any screenshot from a different blog so that I may know what other styles you would prefer. I have some new ideas in mind and I will share them soon.

    Manisha you are always welcomed buddy. :>

    @Vishal
    I have sent you the template and thank you very much for the kind feedback pal. Means a lot. :>

    @Faisal
    Brother please mention them again I honestly don't remember any. I would love to publish them

    ReplyDelete
  8. @Prime Aque

    I don't know what is the problem but when I tried to add your banner at my resources section (footer area) it doesn't show...

    ReplyDelete
  9. Another thing Bro, when I click on this, it doesn't redirect to the comment area, instead it bring me to the post body, how I make this like yours, when I click on yours, say 'be the first to comment' it will bring me to the comment area, I am using disqus as comment system, is there any solution for this? Thanks Bro!

    ReplyDelete
  10. Thank you for this tutorial! I have Intense Debate running on my Blogger blog http://harlemlovebirds.com and I added your comment counter but can't seem to get rid of the Blogger's default comment counter on the bottom of my posts. When I try to remove the HTML it gives an error. Also when new commenters comment it's only updating in the default comment counter at the bottom of my posts and not in the comment counter at the top. So while it may still say, "Be the first to comment" up top, down below it's showing the default comment counter. However, when I click on the "Be the first to comment" I can see the new comment. The previously posted comments are showing up though in the comment counter up top. I'm wondering if your comment counter and Intense Debate aren't compatible. Seems like they're not syncing. Any tips? Thank you!

    ReplyDelete
  11. hello Moha. tried to use this on my blog, but it's not showing the coment bubble. just the number of comments.

    ReplyDelete
  12. Thank you so so so much ....I learnt a lot from you :)

    ReplyDelete
  13. AslamuAlaikum Mohammad bhai... its working like a charm!! :) thank you

    ReplyDelete
  14. Please help me how to make a auto comen in all blog

    ReplyDelete