Nice comments counter style for your blog post

Are you looking for an idea to restyle your comments counter on your blog?

This post illustrates how to design a nice comments counter for your blog post and obtain an elegant post header using just some lines of CSS code. This is the result:

You can download the source code and use it immediatly on your blog.

Download source code

Counter structure
The following picture explains how to design our comments counter:

We have a main DIV which includes a <span> element (with class attribute = "count") which displays the number of comments for the current post and, below it, the text "comments". I prepared this image to for the DIV background using Photoshop:

I'll apply this image to background attribute in the CSS definition.

HTML and CSS Code
This is our HTML code:

<div class="bubble">
<span class="count">... counter ...</span>
comments
</div>

...and this is the CSS code:

.bubble{

background:url(img/bubble.png) left top no-repeat;
color:#575553;
float:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
height:68px;
margin-right:20px;
padding-top:7px;
text-align:center;
width:70px;

}

.bubble .count{

font-family:Georgia, "Times New Roman", Times, serif;
font-size:24px;
color:#CC6600;

}

It's all! Nothing simpler :)

Share this post

	Share on Facebook
	Share on Twitter
	Share on StumbleUpon
	Share on Delicious
	Share on Reddit

	Share on Digg
	Share on DesignFloat
	Share on Technorati
	Subscribe to Feeds RSS

Old Comments

Mostly Lisa said...: Ohh. i really like this. It would go really nice with my comments. Thanks. I'll get on it.

PS. Dugg.; March 27, 2008 4:35 PM
Anonymous said...: Hello,
Would you please post an article about making templates for new version of blogger?
Something like your template
Regards.; March 28, 2008 12:52 AM
SeoScout said...: very nice. i'll try it myself and i'll republish it (german) at my blog and give credit to you.; March 28, 2008 5:42 AM
Nitos said...: LOL.. anonymous.. I told antonio to do it.. there's two! :D..
Love this post going to use it on my blog thanks antonio (as always); March 29, 2008 9:22 PM
Ginger M said...: This is really cool. Found you via stumbleupon.
Cheers,
M; March 31, 2008 7:03 AM
Abhisek said...: Thanks for the tips.
@anonymous, I second that! ;); April 4, 2008 5:05 AM
Yogesh Agrawal said...: Hi, It is really nice, but could you tell me how should I use this code, I blog on blogger, I didn't get how to use the code.; May 5, 2008 8:58 AM
bihi said...: very cool. thx; May 8, 2008 10:32 AM
Unlock iPhone 3g said...: Awesome post. Thanks!!; March 31, 2009 11:17 AM