Monday, August 11, 2014

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 lets 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/AVvXsEh_NnTm2c6OUWH31BVL2dPQP0HQSmmB-nsdxlSxW6Dp8_qWbzHfkMrRNjFj63bwI0M9mzEr6kdjRrrY-fG75huxCECm4mU5S3-B19A62bgp9kyZZ78PenbbcX3tiY4d1fynayjUKBwKhg-u/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/AVvXsEh_NnTm2c6OUWH31BVL2dPQP0HQSmmB-nsdxlSxW6Dp8_qWbzHfkMrRNjFj63bwI0M9mzEr6kdjRrrY-fG75huxCECm4mU5S3-B19A62bgp9kyZZ78PenbbcX3tiY4d1fynayjUKBwKhg-u/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"]
Bubble Comment Count in bloggerBubble Comment CountBubble Comment CountBubble Comment CountBubble Comment CountBubble Comment CountBubble Comment Count for bloggerBubble Comment CountBubble Comment CountBubble Comment CountBubble Comment CountBubble Comment CountBubble Comment CountBubble Comment CountBubble Comment CountAdd Bubble Comment CountShow Bubble Comment CountHow to add Bubble Comment Countbubble comment bloggerbubble comment bloggerbubble comment bloggerbubble comment bloggerbubble comment bloggerbubble comment bloggerbubble comment bloggerbubble comment bloggerbubble comment bloggerbubble comment bloggerbubble comment blogger

Related Post:

0 comments:

Post a Comment

 
Powered by Blogger .
Converted To Blogger Template by Anshul .