0 COMMENT BUBBLE FOR BLOGGER.

Comment bubble is very useful in blogs,as it makes your blog look more attractive and professional.
What is comment bubble?
You would notice a number at the top right-hand of this post title with a picture in the background.That's what comment bubble does to blogs.It shows the number of comments in a post and when a visitor clicks on it,it slides automatically to the comment section of the post after loading.

HOW TO ENABLE COMMENT BUBBLE.

Login to your Blogger Accountand go to Design >> Edit HTML.Backup your template in case something goes wrong.
Check the box next to
Expand Widget Template and search for ]]></b:skin> by pressing Ctrl+F on your keyboard.

On getting that,paste the following codes BEFORE/ABOVE it.

.comment-bubble{float:right;width:48px;height:48px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW3I5-aMdTEXshcB-s6eSf3N8mssd06k4bvsphQqRtixEQBanBBDs6Hqnb5lF6q4qyTx-_D1XeI9UIWwTb6t5G4erLnzNlYx5sXr9Z8TagUUKNBhzjYnbaoicukgChdHbYQcA2SFTf-Z68/) no-repeat;font-size:18px;margin-top:15px;margin-right:2px;text-align:center;position:float;}.comment-bubble{float:right;width:48px; height:48px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW3I5-aMdTEXshcB-s6eSf3N8mssd06k4bvsphQqRtixEQBanBBDs6Hqnb5lF6q4qyTx-_D1XeI9UIWwTb6t5G4erLnzNlYx5sXr9Z8TagUUKNBhzjYnbaoicukgChdHbYQcA2SFTf-Z68/) no-repeat;font-size:18px;margin-top:15px;margin-right:2px;text-align:center;position:float;}

Now,find this piece of code <b:if cond='data:post.link'> by pressing CTRL+F as usual and replace it with the following~~

<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>
<b:if cond='data:post.link'>

<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> <b:if cond='data:post.link'>

Now,preview your blog and SAVE it.
That's all. You should have a comment bubble on your blog now.
You can replace the image in the css code above with any of the following»»

Just get any of the image's url by right clicking on the image & change it with the one in the css above.

Posted in: Blog hacks and tricks,Blogging tips