This is a continuation of the series about customizations I made to my Blogger template after switching to the Blogger beta.
This time I'm going to talk about the condensed list of labels that I've put in the sidebar. Synonyms for "labels" used by other blogging tools include "categories" and "sections". For user navigation I like "sections", personally, so that's what the sidebar says.
Why customize it?
The default list of labels is a standard bulleted list that displays vertically.
The problem with vertical lists is that, well, they're an inefficient use of vertical space in the sidebar. If you have a lot of labels, you'll wind up with an extremely large portion of your sidebar devoted to this list. The vertical space that the list occupies will be far out of proportion to its importance.
Frankly, the list of labels isn't that important to me. It's a nice touch, and I would like them to be there, but I wouldn't say that it needs an entire screenful in my sidebar. So I set out to fix that.
Here are the modifications I made to the default "Labels" widget to accomplish this.
<b:widget id='Label1' locked='false' title='Sections' type='Label'>
<ul style='padding-left:10px; margin:0; text-indent:0;'>
<b:loop values='data:labels' var='label'>
<li style='display: inline; list-style-type: none; padding-right: 5px; line-height: 140%;'>
<b:if cond='data:blog.url == data:label.url'>
<a expr:href='data:label.url'><data:label.name/></a> (<data:label.count/>)
Since the styles here are very highly specific to this single list, and unlikely to be re-used, I decided to mix CSS with HTML here by assigning the styles via the
style attribute on the tags. This isn't normally good practice, but Blogger templates do it a lot already, and it's actually kind of convenient here.
display: inline; style on the
LI tag makes the list horizontal. Adding
list-style-type: none; removes the bullets.
That's almost good enough right there! But during testing I found that the original template used normal spaces in between the label and the numeric post count. Since I am expecting the list to wrap -- it wraps five times at my normal web browser size -- I need it to wrap cleanly. With a normal space, you often get the break in between the label and the post count, which doesn't look right. So I converted the regular space into a non-breaking space ( ).
Why ' ', rather than something like ' '? Because I'm still shooting for XHTML eventually, and XHTML does not recognize ' ' as an entity. The Unicode code point ' ' is the direct equivalent.
After all that was done, padding, margins, and line height were adjusted to my personal preference. Your needs may vary.
Although this looks simple, I tried a couple of other things before settling on this solution.
Putting the list in a paragraph - I considered this as an option, but was unable to get Blogger's template language to do it. You could do it as a space-separated list, but as soon as you add separators of any sort -- like commas -- there's no apparent way to avoid putting a separator in at the end. Blogger supports an "isLast" property on labels when used in the post widget, but it does not do so in the labels widget. On further consideration I decided that this was probably a bad approach, anyway, since it's not as accessible as using real lists.
<font expr:size='data:label.count'> ... </font>
Adding some interesting CSS decoration - I considered doing this too. But the only decent decoration I could think of was a rounded button look similar to what Safari uses in its Bookmarks toolbar. That would have been possible, but I'd need to create and edit some images and use this method to get the rounded corners. Worse, it wouldn't display correctly in Internet Explorer so I'd need to do a CSS hack to hide it. So I tabled this idea too. Even so, I might look back into this in the future.
More template tips
Other entries in this series: