Add Comments Bubble To Post Titles In Blogger

Add This To Del.icio.us Tweet/ReTweet This Share on Facebook StumbleUpon This Add to Technorati Digg This

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


LIVE DEMO
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:

<!--COMMENT-BUBBLES-STARTS--><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><!--COMMENT-BUBBLES-STOPS-http://bloggerstop.net-->

Now find this code in the template:

</head>

And immediately ABOVE/BEFORE it paste this code:

<!--COMMENT-BUBBLES-STARTS--><style type="text/css">
.comment-bubble {
float: right;

background: url(http://i49.tinypic.com/2vugahu.jpg) no-repeat;
width: 55px;
height: 38px;

font-size: 18px;
margin-top: -15px;
margin-right: 2px;
text-align: center;
}
</style><!--COMMENT-BUBBLES-STOPS-http://bloggerstop.net-->

Edit the code in RED to change the image being used in the hack.
IMPORTANT: You may use any image instead of the one linked in the code above (STEP #3), but you have to mention its dimensions correctly (width and height) for correct placement of numbers on the image.

Comment-Bubbles you may use for this Blogger hack [Right Click and "Copy Image Address/Location"]:

---