JONS STYLE : Show Comment Bubble at Top Right of each Blogger Posts

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(http://i43.tinypic.com/dljpzo.jpg) 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 http://i43.tinypic.com/dljpzo.jpg with the bellow code of your choice

http://i46.tinypic.com/23u9cvl.png
http://i50.tinypic.com/2u8knqo.jpg
http://i45.tinypic.com/2q2k2vp_th.jpg
http://i46.tinypic.com/nntcue_th.png
http://i46.tinypic.com/1zwj6eo.gif
http://i47.tinypic.com/2vnqmxh.png
http://i46.tinypic.com/k0swg9.png
http://i45.tinypic.com/esqf84.png