Add Auto Comment Count Below Post Titles in Blogger

Comment 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! :>

SHARES

Share

Pin it

Tweet

Share

Share

Print

Buffer

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 »

Mohammad 8/03/2011