Tuesday, July 7, 2009

How to mage blogspot(blogger) templates wider

So If you wonder how to make blogspot (aka blogger.com) template wider here is a solution that works for "Rounders" template.

The idea behind the changes shown below is to change main blog container size by adjusting CSS style sheet of the template you are using. If you are not comfortable with the "container" word, try to think about it as a box for anything in your web page.

So back to the idea of the change, we need to make this box's width to something greater than 824 pixels. Let say 1024 pixels, cause we can expect it virtually from any computer monitor.

Besides that we also should increase size of our posts side of the template. Cause apparently, it is exactly what we mean when we say "make posts wider". In my example we are doing that by replacing fixed numbers (in pixels) with relative (in percents). Suggested values are 72% + 1% + 27% for Posts + spacer + Blog Info parts. In pixels we get 737 + 10 + 276 which totally satisfies me.

The only issue is with the rounded corners for this template. I don't care much about them, so I've just removed them, by removing images in background styles definitions. If do like to keep them, then you'll need somehow to provide images of your own.

For information how to access "edit template" functionality go here.
AND DON'T FORGET TO BACKUP YOUR TEMPLATE!

Here is a link to my template used for this blog. It is a "Rounder 3"-based template.
Bellow is marked-up diff output for original an "stretched" templates:

No comments: