Add Comments Bubble To Post Titles In Blogger

A few days back I published a tutorial on how to add numbering in comments in Blogger blogs. Now 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"]:

---

---

Finally save the template.

Blog Admin : Divya Sai

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Google Facebook Twitter More

• Digg
• Linkedin
• Stumbleupon
• Delicious
• Tumblr
• BufferApp
• Pocket
• Evernote

Related Posts

• 11 Best eCommerce Themes For Blogger If you think it's not possible to host an eCommerce website in XML based Blogger, then we have dozens of such template
• Grab a Domain for FREE - Offer Ends on 30 June 20101and1 is offering a .COM domain for completely FREE. Domain name registered by me: DivyaSai.com You won't be paying a
• My Blog is My Marketing Tool - Says Erin FerreeBlogger of the Week: Erin Ferree from Elf-Design Erin Ferree, founder of elf design, helps small businesses stand out f
• 7 Ways to Reduce Blog SpamA guest post by James Adams, editor and contributor to the CreativeCloud blog. Bloggers know that dealing with spam ca