How To Add Comment Bubble In Blogger

Do you want to make your blog look different and nice? Add this comment bubble on your blog. You can add this widget in second. Follow this easy steps :


1. Go to your Dashboard > Design > Edit HTML > Check Expand Widget Templates.


2. Find this code :

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

3. Paste this code below, under it.

<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>

4. Now, this code :

</head>

5. Paste this code below above it.

<style type="text/css">
.comment-bubble {
float: right;
background: url(PUT YOUR BUBBLE IMAGE URL HERE) no-repeat;
width: 55px;
height: 38px;
font-size: 18px;
margin-top: -15px;
margin-right: 2px;
text-align: center;
}
</style>

6. Insert your own bubble image URL. Here 43 of Comment Bubble Collection Icon. Download it here.

7. Host the icon by yourself to avoid exceeded bandwidth if you using image host by others. Also you can change the width and height.

8. Preview it. If it looks fine. save it. DONE!