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