Monday, January 01, 2007

Visual Anatomy of the Blogger Post Widget

A little something that I came up with in the process of upgrading this blog's template to the new Blogger: a visual anatomy of the default Blogger post widget.

The new Blogger makes use of widgets to hide much of the internal complexity of the code. Widget types come in standard formats, and they all make use of common CSS classes and IDs. This allows the designer to focus on the look of the template using CSS and Blogger's sections.

One of the most complex widgets, and certainly the most critical, is the Post widget. This is the widget that displays the actual blog post. This includes date headers, titles, post footers, and comments. The new Blogger provides a standard Post widget so that designers don't have to design this from scratch.

However, the question arises: what visual elements does the Post widget make use of? And what names does it use? I slogged through the widget code to come up with this simplified map.

Understanding this map requires some rudimentary understanding of CSS. However, the elements should be already be fairly obvious at first glance. Essentially, it's just a series of classes and IDs.

You can use this map to manage the look of the elements of the Post widget when you're designing your own template but still want to make use of the default widgets.

Of course, if you're looking to do something really unique, there's no choice but to get your hands dirty in the actual widget code.

Have fun!


  1. How cute. It's even colored for our convenience. :)

    I can see a bit of potential in this, mind you... maybe people can put together some similar visual analyses for other blogging tools.

  2. Thanks, Sean. I added the colors as an afterthought to make it easier to read. Looks like it turned out well. Need help with your template?

  3. hapinuyir!

    this is way over my head.

    but maybe you can share how you were able to make the switch. were you one of the lucky ones who got the offer to switch? because i'm certainly still waiting for my invitation.

    my manual categories could really use the new blogger's labels...h

  4. 6p00f48cebd6fe000298sE3dwv