Show Comment Bubble at Top Right of each Blogger Posts

Add bubble comments count near your each of you post title can make make your blog more attractive to your visitors. If you are a new blogger in blogging era and want to design your own customize template or modify the existing one, this tutorial is for you. so let's go ahead and add a small bubble comment count in front of your blogger post area. find working demo on this blog.

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

STEP #2
Now find (CTRL+F) this code in the template:

]]></b:skin>

And immediately before it, paste this code:

.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMOCkSOxOwNIWZ0uBuJrsu_pWY1wko3rOjgKVH6yTJjmnNcVvAVaVgTfwSt4H2NJhK4QPOH98sJKqAdhdM_8mVrdpj9kIWwHW3CYAfKvb0-yPlWfS6U8vE80VBtpKV6lJbL52KKwNZBvMj/s1600/Comment+Bubble+%281%29.png) no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
position:float;
}

Now find this code:

<b:if cond='data:post.link'>

and replace it with the bellow 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>
<b:if cond='data:post.link'>

Click Preview. If its ok than save your template.



Frequently asked questions and solutions ..

Q. Can i change the bubble image to suit my blog ??
A. Yes you can just change the code https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMOCkSOxOwNIWZ0uBuJrsu_pWY1wko3rOjgKVH6yTJjmnNcVvAVaVgTfwSt4H2NJhK4QPOH98sJKqAdhdM_8mVrdpj9kIWwHW3CYAfKvb0-yPlWfS6U8vE80VBtpKV6lJbL52KKwNZBvMj/s1600/Comment+Bubble+%281%29.png with the bellow code of your choice

update:
To use this images [Right Click and "Copy Image Address/Location"]