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

Artikel Terkait di Bawah posting