Blogger, Tutorials

Add Bubble Comment Count on Blogger / Blogspot Blog

6 Comments 28 November 2009

If you are a new blogger and you want to develop your own template according to your own specification, then don’t miss to add a small bubble in front of your blogger comments count area. It will make your blog more attractive to your visitors.

You can see in below screen shot

add bubbleIf you want to add the exact bubble in your blogger blog, then you have to add a simple code in your blog Template code, you will be able to see this beautiful in your blog.

Login to your blogger “Dash Board”

Click on “Layout”

Click on “Edit HTML” and a give tick to “Expand widget Template”

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(http://i43.tinypic.com/dljpzo.jpg) no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
position:absolute;
}

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 to see if every thing is correct. If every thing is ok, then click on Save Template button and now you can see that a beautiful bubble has been added to your blog posts comment count area.  You can also create your own image, instead of adding the above image, you can add your own image. Whatever you want to add. Just create a image and then upload it to any image host website. Copy the link and paste it here, instead of the above one.

SHARE THIS ARTICLE

Facebook Email Stumble Digg Orkut

Get updates related on Add Bubble Comment Count on Blogger / Blogspot Blog in your Email

Author

Bilal Ahmad

Bilal Ahmad - who has written 27 posts on Blogsolute.

Bilal is a technical blogger at Techmaish.com and writer specializing in blogging tips, product reviews and tutorials.

Your Comments

6 Comments so far

  1. Hetal Patil says:

    Hello,

    I tried this hack, but for me bubble is coming in on extreme left instead of extreme right. Please help.

  2. anandharaja says:

    this is the nice hack but the bubble is appear in the extreme left, how can i change the position of bubble.

  3. really cool feature, Im going to try to apply it now.

  4. Aidil FS says:

    Hey, it worked.been looking for this all over the place.Clear instructions. Thanks a lot.


Share your view

Post a comment

Top incoming search terms for this post
    Subscribe to Newsletter Subscribe to SMS alerts

    Netvibes Friendfeed Google Reader Add to Yahoo

    © Blogsolute. Powered by Wordpress.

    Sitemap | Privacy Policy