Add Comments Bubble To Post Titles In Blogger

Posted by Isha Singh on May 2nd, 2010 | No Comments

This tutorial will add comments-bubble icons to your post-titles displaying the total count of the comments.

Instructions to follow:

STEP #1:
Log in to Blogger, go to Layout -> Edit HTML
And mark the tick-box “Expand Widget Templates“

STEP #2:
Now find this in the template:


 <h3 class='post-title entry-title'>

And immediately BELOW/AFTER it, paste this code:

<b:if cond='data:post.allowComments'> <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a> </b:if>

Now find this code in the template:

</head>

And immediately ABOVE/BEFORE it paste this code:

<style type="text/css"> .comment-bubble { float: right; background: url(http://4.bp.blogspot.com/_MdgHW8LLOTQ/S916UapH7FI/AAAAAAAAADo/KynJjzCUU7Y/s320/df97c4.jpg.png) no-repeat; width: 55px; height: 38px; font-size: 18px; margin-top: -15px; margin-right: 2px; text-align: center; } </style>

Edit the code in RED to change the image being used.

IMPORTANT: You may use any image instead of the one linked in the code above , but you have to mention its dimensions correctly (width and height) for correct placement of numbers on the image.

Also you can use the above images [Right Click and "Copy Image Address/Location"].