36
comments
Add Bubble Comments Count in Blogger Post Title
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 :)
Steps to add bubble comments count:
STEP #1: Log in to your blogger “Dash Board”. Navigate to Layout > Edit HTML section and a give tick to “Expand widget Template”.
STEP #2:
Find ]]></b:skin> in your template code and place the below code just before ]]></b:skin>
.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUavRvF2GYMaw8BGltZ_vb1ITgJZji-RRqbaZf723PMqh7g3YpzVYO1DxaLdR4Efph9ICm4k74uayBT9KROhm65lyGhuWia9zsppXikr6tj0dZcYXPNJAZ_4eCp3rpU4zEmlkym0SILMM7/s1600/Comment+Bubble+%2815%29.png) no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
position:absolute;
}Note: To Align bubble image right of the title remove position:absolute; line from #step 2 code.Now find the below code and add the red code inside the code.
<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'><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'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>Now click on Preview button and have a look at your post first, if every thing is correct then save template and done. Instead of adding the above image, you can add your own image or you can choose one of the image given below.
IMPORTANT: You may use any image instead of the one linked in the code above (STEP #2), but you have to mention its dimensions correctly (width and height) for correct placement of numbers on the image.
To use this images [Right Click and "Copy Image Address/Location"]
So what is the output? are you succeed and get a bubble comment count on your blog?
ThanX!
color:gray !important;
and for on mouse over color change use this,
..comment-bubble a:hover{color:red;}, or something like this :)
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/><br/><span style='font-size:10px'>comments</span></a>
your bubble comments would be display same as i have in my blog :)
.post h3 a, .post h3 a:visited, .post h3 strong {
color:#B3B3B3;
display:block;
font-weight:normal;
text-decoration:none;
}
Remove bold text from code and done :)
thanks in advance
It a blog i'm working on, for a comic.
http://arruinado-comic.blogspot.com/
Regards
1) To center the bubble comment count on your blog add this property padding-top:10px; in .comment-bubble class.
2) Yes, there is a tutorial for creation custom buttons for home, previous and next links. Actually I know how to do it,so i will publish a post for you tonight. so wait and watch :)
I'll look forward for the other tutorial.
Thanks again.
but now am troubled again
pls help
my bubble is on the left side of title
i want it at left like you helped "DS"
pls tell me thanks
see my blog at gadgetoxic.com
Below is my comment bubble code:
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/><br/><span onmouseout='javascript:this.innerHTML="Comments"' onmouseover='javascript:this.innerHTML="Add New"' style='font-size:10px'>comments</span></a>
Hope you would like this. Let me know if you need more information.
http://secretofgreatachievers.blogspot.com thats my blog.
please check it out. thanks and hoping to hear from you