How to change your blog width and columns

This third installment of the "How to Set-up Your Blog" series is about editing the HTML to adjust your blog layout (specifically in Blogger). This will not be an indepth tutorial on HTML coding, but just some basics to help you make some common changes.


It's a good idea to setup any custom layout before adding too much. Your blog entries and profile are safe, but not much else, should a mistake occur.

The first thing to know is that you should backup your current template before making any changes. This is in case something gets screwed up, you can go back to what you had before. Also, any widgets you have added might be lost, so be sure to save the codes, instructions, and anything else to help you quickly restore them should this happen.

Log in to Blogger. From your dashboard choose Layout, then Edit HTML. Download the template.

A download confirmation box will popup, choose where to save the XML file and you've got it.

If you ever need to upload it, the option is the second line above. It may popup a warning that certain widgets were lost - this is why you saved them! You can go back and add them in again by copy/paste after using "Add a Gadget" as shown in the previous installment in this series.

1. Adjusting from 2 to 3 columns

Blogger does not have a 3 column template, so this can be achieved one of two ways.


The simplest is by uploading a custom template. There are a number of free sites out there - simply Google "free Blogger templates". (This is how this blog was done. The credit and template name is at the bottom of the blog page.)


The second way involves coding, but if you can follow directions or already have some coding experience, you should be ok. This post on BloggerBuster is a wonderful walk through about how to do this yourself, and you won't have to re-add the widgets! (Back them up anyway, I've screwed up enough "simple" directions to know that! lol)



2. Widening your blog


This involves some coding, but it's very simple. Just a matter of changing a number at the right place. This can be done regardless of the column choices you've made, and might take a couple tries to find exactly the size you want. (This is actually part of adding 3 columns, so you might have already done this if you follow the BloggerBuster directions).


Change the outer-wrapper width:


If you've downloaded a different template, the exact text might look different, simply look for "outer-wrapper" where a "px" (that's pixels) size is given. 880-900 px fits 3 columns well, 750 is often used for 2 column. Due to browser settings, any larger than this might be an issue for readers.


If your banner or the top of the blog looks funny, widen the "header-wrapper".