Date Badges and Comment Bubbles for Your Blog
* August 25th, 2008 *
One of the things you run into when your blog becomes bigger, is that you need to cram more info into less space, to make it possible to display all the information you want to show. One of the things I did to do that is add an icon for the date, and then a bubble over that with the number of comments in it.
As you can see, this “shield” shows the day, the month, and the number of comments. This article will show you exactly how to get that effect!
First of all, I’m using the calendar icons made by Marek Sotak. I’ve also built upon his idea to have specific images for each month, so you don’t have to put the month into the image with text, allowing for a nicer layout of the calendar icon.
We’ll begin by creating a calendar icon like this:
<p class="date month8">18</p>With the following CSS:
p.date {
width: 42px;
height: 10px;
padding: 18px 0 14px 0;
text-align: center;
}
That makes the date box, now we’ll need a line for each of the 12 months:
.month1 { background: url(images/cal_01.gif) no-repeat 0 0; }
.month2 { background: url(images/cal_02.gif) no-repeat 0 0; }
.month3 { background: url(images/cal_03.gif) no-repeat 0 0; }
.month4 { background: url(images/cal_04.gif) no-repeat 0 0; }
.month5 { background: url(images/cal_05.gif) no-repeat 0 0; }
.month6 { background: url(images/cal_06.gif) no-repeat 0 0; }
.month7 { background: url(images/cal_07.gif) no-repeat 0 0; }
.month8 { background: url(images/cal_08.gif) no-repeat 0 0; }
.month9 { background: url(images/cal_09.gif) no-repeat 0 0; }
.month10 { background: url(images/cal_10.gif) no-repeat 0 0; }
.month11 { background: url(images/cal_11.gif) no-repeat 0 0; }
.month12 { background: url(images/cal_12.gif) no-repeat 0 0; }Having done that, the image will render like this:
Now as you’ve noticed, the HTML code this far was quite simple, the way Marek put it together, but it’s not very accessible. Though it makes perfect sense if you have a CSS enabled browser, it doesn’t make that much sense if you don’t. So we’ll change it to this:
<p class="date month8"><span>Aug</span> 18<span>th</span></p>And we’ll add this to the CSS:
p.date span { display: none; }Adding in the comment bubble
Now we’ll get into the spicy part: adding a bubble with the number of comments in it. To properly do that, we’ll need a bounding box around the date, which we’ll call “shield”, and we’ll add a div called commentscloud. It’ll look like this:
<div class="shield">
<p class="date month8"><span>Aug</span> 18<span>th</span></p>
<div class="commentscloud">5</div>
</div>All we’ll do with the shield div, is give it position: relative;, so we can use position: absolute; on the commentscloud. The full CSS looks like this:
.shield {
position: relative;
}
.commentscloud {
position: absolute;
text-align: center;
top: -4px;
left: 22px;
width: 30px;
height: 24px;
padding: 3px 0;
background: url(images/bubble.png) no-repeat 0 0;
}Which renders into this:
Implementing this in WordPress
The CSS is easy: just add it to your theme’s style.css. For the HTML, you’ll have to open up the appropriate page of your theme, for instance index.php, and look for the_post(). You’ll have to add the following code where you need the badge to be displayed:
<div class="shield">
<p class="date month<?php the_time('n'); ?>">
<span><?php the_time('F'); ?></span>
<?php the_time('j'); ?>
<span><?php the_time('S'); ?></span>
</p>
<div class="commentscloud">
<?php comments_number('0', '1', '%'); ?>
</div>
</div>This way it should work out fine. For an example of how this looks, check my site: Yoast - Tweaking Websites.
This post has been a guest post written by:
Joost (pronounced Yoast, hence his domain name) de Valk is a well known WordPress Plugins author and online marketeer. His blog covers all things WordPress, SEO, and online marketing in general, and next to that he runs a weekly WordPress Newsletter.
Loading ...
As I am just starting to self host my own blog “it’s not live yet” this is very cool. I have been looking for ways to pimp it out. Thanks.