Show Comment Bubble at Top Right of each Blogger Posts ~ Log-Tutorial

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/AVvXsEgQehs5uRmpH9ViGupX5f4HR-qb3cop0TbkEu_sgD0-Qr-76bm8jKDlRLDPwWRv3lWN9jpCr1E064tDcOSdsDLRhkQSYC2eSE-vDt26PIZrFsOwVH9i20zJ3mkQ5h2pQuLe_VyCQyDjzyG0/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/AVvXsEgQehs5uRmpH9ViGupX5f4HR-qb3cop0TbkEu_sgD0-Qr-76bm8jKDlRLDPwWRv3lWN9jpCr1E064tDcOSdsDLRhkQSYC2eSE-vDt26PIZrFsOwVH9i20zJ3mkQ5h2pQuLe_VyCQyDjzyG0/s1600/Comment+Bubble+%281%29.png with the bellow code of your choice