Date Badges and Comment Bubbles for Your Blog

Published
August 25, 2008
by
Guest Author

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.

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:

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:

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.

Nice! I like Luke’s version too.
Only I do not understand why there is no year in de icon, maybe at the bottom. I personally like to see the year, more and more blogs are running for years, and posts are found by a search engine. If you click on the the result, you want to know how actual the post is.

The reason you’d use a sprite despite the limited repetition on a page is for the reduced http traffic from your page and to your servers. The one image is cached (so long as it’s served with appropriate headers), so first time visitors will suffer only one request rather than, say two or three, and returning visitors won’t even suffer that one. Additionally, if you use a search results page that includes the calendar graphic(s), the page could request up to twelve images depending on how many results you display per page.

In your case, adding the month labels into a sprite would result in negligible image size increase. Even possibly less than the data weight associated with the network io for one additional month graphic. For something like my iCal example, the size delta is more of a concern because the sprite includes the days as well, so the file size increased by ~3x. However, even this isn’t so bad in the face of the reduced http traffic and the reality of the fact that the file size is still pretty darn small.

Granted there is also added css to manage the sprite, but again, limited byte weight and cached. Worth considering, anyway.

Nice â€” though could be optimized a little more as others have pointed out above. I also think you could do it without the inner paragraph â€” just center align the date inside the shield div, and then realign the comments cloud relative to that. You could also just have the comments cloud bubble image as part of the calendar image.

Also I think making duplicate images for all the months is wrong â€”Â it just doesn’t feel right â€”Â I think simple text aligned on top of the image should suffice. Sure, it will not look right if people resize their text, but neither will the other numbers :)

But I’m just nitpicking! This is great stuff and more sites should definitely use this sort of thing to display their date and comments info concisely.

Your site is a refreshing change from the majority of sites I have visited. When I first started visiting web sites I was excited by the potential of the internet as a resource and was very disappointed initially. You have restored my enthusiasm and I thank you for your efforts to share your insights and help the world become a better place.

This comment thread is closed. If you have important information to share, you can always contact me.

Treehouse is where you go to learn HTML, CSS, and how to build iOS apps. It's a complete education in modern web and app technology, designed to get you ready for a hot new job or to kickstart your own business.

The Lodge is a member login only area with access to video training on how to build websites from scratch using the best modern tools.

How many people touch the CSS in your current main project?

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with the rest other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by MediaTemple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.