Tuesday, June 30, 2009

New Blogger template released

I'm finally satisfied with the quality of my blog's new style, so I'm releasing it as a Blogger template under the Apache 2.0 license. You can use it on your blog, modify it, or even sell it as long as I get credit.

Features

Here are some of the features of the new Blogger template "Whitespace is good":

  • Two sidebars This fantastic template comes with not one, but two versatile sidebars. You can fill them with as many widgets as you'd like!
  • Blog color manager I've plugged Blogger's color management code into the template, allowing you to modify the colors without changing the underlying CSS. If you want your headings to be purple, you can change them yourself!
  • High readability This template was designed to give your blog a clean, content-focused style. That's why I made the body text a colossal 16 pixels Arial and gave it a generous 30 pixel line height. Even an 80-year-old man looking using an old Eee PC could read from this Blogger template!
  • Easy accessibility What if the 80-year-old is reading from a PDA, you ask? He can scale up the text and the whole page will scale with it! I used all relative measurements in my site's fluid grid, permitting even IE6 users to enlarge the text. I've also added some hidden links at the top to let visitors with screen readers skip to the real content. This template's prepared for any eventuality!

Advanced Features

In addition to enabling the GUI-addicted users to remain in blissful ignorance, I'm giving enlightened users lots of control and convenience when modifying the template.

  • Scripts section For your coding convenience, I've created a special hidden div at the top of the page for you to easily add and remove scripts through the Blogger visual widget manager. I'm using it to hold my Google Analytics tracking code.
  • Strict baseline grid I tried to lay this website out right by following every classical design concept I could. This style tries to stick to a strict 30 pixel grid in its vertical and horizontal positioning. The baseline grid only fails when pictures' heights aren't multiples of 30 pixels and when two different sizes or types of text share a line (eg. monospaced font + standard font).
  • CSS variables I use two Blogger CSS variables that aren't accessible to standard users to give developers the option to change all the heading fonts and all the text fonts together. You can substitute your fonts for the defaults by modifying only two lines.
  • Apache 2.0 license I'm giving you full rights to modify and redistribute this template. You can port it to Wordpress, reuse parts for your personal website, or even sell a website template based off it. I'm not going to stop you.

Download and installation

You can download the "Whitespace is good" Blogger template as a compressed .zip file here. To use it, just copy the contents of the file template.xml into the "Edit HTML" box under "Layout" on the Blogger menu. If you don't have the "Layout" tab, click on the "Template" tab, then click "Customize Design" and pick a new template at random. Now you should be able to follow the instructions above. Note: If you paste the new template into the "Edit HTML" box under the "Template" tab, you won't be able to add widgets and change your the colors of your blog.

If you have any opinion on the new Blogger template or you have any problems with it, simply post a comment below. I'll try to fix any problems that don't have to do with Internet Explorer.

Update: I just fixed a bug in the template. All zero of you to download the template already should upgrade to the new version.

Update: I've added a massive two-column-spanning sidebar above the other two. The template looks just the same as it used to, unless you place a widget in the new section. Notify me of any problems.