Blogger beta - year and month breadcrumbs

Following on from the calendar archive widget I blogged about the other day, here's another nice addition to your blog post displays in Blogger beta - year & month breadcrumbs.

I found the breadcrumbs on PurpleMoggy's Blog - together with very clear instructions on how to put them on your blog. They show up at the top of each individual blog post (although they aren't visible on your blog's homepage).

The vast majority of my visitors arrive on my site via a Google search, which means that they generally start off on an individual blog post page, rather than on the homepage. The breadcrumbs show you where you are in the hierarchy of the site, and they also show how each post fits into the archive (by month and by year). I think it's a nice companion to the calendar widget, because both the calendar and the breadcrumbs display in different ways the location of each post within my blog.

The breadcrumbs also let you view all posts from that month (by clicking on the "month" link), or all posts for that year (by clicking on the "year" link). And - because there's also a "home" link - you can easily get back to my homepage if you want to. Nicely done!

I needed to make a couple of alterations to Purple's CSS styling for this widget. Originally the styling looked like this:

.breadcrumbs {
border-bottom:1px dotted $bordercolor;
margin:0 0 0.5em;
padding:0 0 0.5em;
}

Which I changed to this:

.breadcrumbs {
border-bottom:1px dotted $borderColor;
margin:0 0 0.5em 0;
padding:0 10px 0.5em 10px;
}

The variable $borderColor is part of Blogger's WYSIWYG editor (in the Font/Color page) - basically what it's doing is going off to find out what colour is being used for the border in your particular template, and replicating it beneath your breadcrumbs text. You'll see I've changed $bordercolor to $borderColor (with a capital C) because that's how it's defined earlier in the template, and Blogger beta wasn't too keen on the all lower-case spelling when I did a preview before saving my template.

The other change I made was to add 10px of left and right padding to the breadcrumbs style: padding:0 10px 0.5em 10px;. As my Blogger template uses coloured boxes with curved corners, the breadcrumbs were bumping right up to the edge of the box on either side, which didn't look so great. A bit of padding on either side pushes the breadcrumb text away from the edges of the box, which looks a lot nicer in my template.

I think it's a great little widget - kudos to PurpleMoggy for coming up with it! Now go get one of your own!

Technorati tags: Blogger beta, hacks, widget, breadcrumbs, year and month, archive calendar, calendar widget, PurpleMoggy, web development.