If your girlfriend has an amazing blog, has more and more visitors every week, and you happen to be an UI guy, the least you can do is to make the blog look as pretty as its content – especially if you already promised to do so. Since our experiences might be useful to others running blogs on Blogspot, here are is a few words about the process.
A custom domain really is a must for all serious bloggers, so that was the first step. Since Blogspot (aka. Blogger) is a Google service, this was a rather easy part with a “next-next-finish” experience. That was actually the only thing we had to pay for, with the total cost of about ten bucks.
Before having any graphics done, we agreed on trying to keep the tools Blogspot provides to its users: widgets, social buttons for posts, tagging and so on. This introduces loads of constraints, but in the end, leads to a more flexible blog. Based on the current layouts I created a semi-template, and we started to design: with Katrin’s eyes and my hands we have put together some fine graphics in the end.
Because the already given structure and most of the markup generated by an unknown engine, for the sitebuild, the best approach seemed to be to use a template that is already available on Blogger. We have found one that was quite similar our layout, so I started the work based on that. With the help of Opera’s Dragonfly, the final CSS was done. Luckily I managed to avoid doing serious modifications on the DOM; keeping most of the original markup helped a lot in the integration process.
In the design we used a font that is not present on all platforms; to be able to use American Typewriter for the post headers without Flash, I used Cufon and some font support javascript that was already available for download somewhere.
As a final touch, I removed the Blogspot header as well. Now, I’m not sure if this was a legal move, but Verzetteltes looks much better without the blue strip, and there are a bunch of blogs on Blogger that are already doing that. In the worst case, I’ll be able to write about how to move a blog from Blogspot to WordPress as well.
For the image resources we added, we needed some online storage as well. For this purpose we used Google’s Picasa service – the few images we had easily fitted the free quota. All the JS and CSS content is wrapped in the HTML template, which is not the prettiest solution but seems to be a Blogger best practice.
Katrin’s blog is available at www.verzetteltes.com