Tuesday 13 November 2007

Altering Blogger Templates

I haven't posted for quite some time. I've been busy with several projects over the last few months and have been readjusting priorities (see my previous posts).

However, I thought I'd share a bit about the process of discovering how to make my site and blog similar in appearance without sacrificing function for either.

The images below on the right show this blog and my personal site after it was altered to fit some of the way this blog is laid out.

My blog's design is based upon the Rounders 4 template (designed by Douglas Bowman), which I altered to display my own header photo and include a few other changes.

My blog was originally a research project to teach myself how to modify the Blogger templates so that I could place similar components on Websites as were on their corresponding blogs.

In my site, I retained left-aligned navigation and didn't place right-aligned content on my site to match the About Me and Sites of the Moment content style.

Because the blog template had rounded corners, I rounded the corners of the header image for this blog. The square corners were retained on my personal site to match the layout on that page.

Later, I took what I'd learned here to update a client site and to make three of her blogs look similar to her site:

Each of these had a different Blogger template and I converted each blog into the Son of Moto template by Jeffrey Zeldman before uploading the changed template so that all the settings and content would be retained.

This arrangement gave Sheryl the ability to alter content on her blogs, yet to retain a similar look to visitors moving between the various blogs and her site.

This is one of the big advantages of running a blog—the ability for non-HTML literate users to add content as well as change how the blog looks without losing anything or knowing what's taking place behind the scenes.

Update: The design of my personal site as well as some of the layout on this blog have changed significantly since this post was written but the examples are still valid