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 codeCounter 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>
<span class="count">... counter ...</span>
comments
</div>
...and this is the CSS code:
.bubble{
It's all! Nothing simpler :)
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;
}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;
}font-size:24px;
color:#CC6600;
Antonio Lupetti
8 comments
Ohh. i really like this. It would go really nice with my comments. Thanks. I'll get on it.
PS. Dugg.
Hello,
Would you please post an article about making templates for new version of blogger?
Something like your template
Regards.
very nice. i'll try it myself and i'll republish it (german) at my blog and give credit to you.
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)
This is really cool. Found you via stumbleupon.
Cheers,
M
Thanks for the tips.
@anonymous, I second that! ;)
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.
very cool. thx
Post a Comment