This blog has moved here: woorkup.com
Thursday, March 27, 2008

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 :)

blog comments powered by Disqus
Mostly Lisa said...

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

PS. Dugg.

Anonymous said...

Hello,
Would you please post an article about making templates for new version of blogger?
Something like your template
Regards.

SeoScout said...

very nice. i'll try it myself and i'll republish it (german) at my blog and give credit to you.

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)

Ginger M said...

This is really cool. Found you via stumbleupon.
Cheers,
M

Abhisek said...

Thanks for the tips.
@anonymous, I second that! ;)

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.

bihi said...

very cool. thx

Unlock iPhone 3g said...

Awesome post. Thanks!!

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Support this blog with a micro subscription
If you like this blog you can contribute with a micro subscription via PayPal.
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News
Web Templates
Stock Vectors
THE CSS AWARDS