Blogger: Condensed Label List

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.

Widget modifications

Here are the modifications I made to the default "Labels" widget to accomplish this.

<b:widget id='Label1' locked='false' title='Sections' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <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'>
          <data:label.name/>&#160;(<data:label.count/>)
        <b:else/>
          <a expr:href='data:label.url'><data:label.name/></a>&#160;(<data:label.count/>)
        </b:if>
      </li>
    </b:loop>
    </ul>
  <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Widget explanations

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.

The 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 (&#160;).

Why '&#160;', rather than something like '&nbsp;'? Because I'm still shooting for XHTML eventually, and XHTML does not recognize '&nbsp;' as an entity. The Unicode code point '&#160;' is the direct equivalent.

After all that was done, padding, margins, and line height were adjusted to my personal preference. Your needs may vary.

Dead ends

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.

• Changing font size based on post count - This is a relatively new twist in Web design. Flickr's tags are a popular example. However, I couldn't figure out a way to do it without resorting to Javascript. Blogger has a very minimal expression language for templates, but I haven't been able to find any detailed documentation for it. The closest I came was doing something like this:

  <font expr:size='data:label.count'> ... </font>

  But that didn't cap the maximum font size -- potentially leading to problems as I write more posts in each category. For now I've tabled this idea. It would still be interesting, but I think the best way to do it in Blogger would be to leave the base template HTML as-is, then dynamically modify the HTML with Javascript on the client side.

• 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:

• Blogger: Image as Blog Header