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!