How To Blog Design: How To: Create a 3 Column Layout

All of my blog tutorials are for Blogger blogs.

First of all, please make sure that you download your template. If anything goes wrong you can always reset your previous blog layout.

After you've done that, you are ready to proceed.

1- Make sure that your template is set to Minima White. If you are not sure or need to change it, go to the Layout tab and select Pick New Template. There you will be able to see which template you are using and/or select Minima White as your new template.

2- If you are not there already, go to Layout then select Edit HTML.

Scroll down to where it reads #outer-wrapper and change the width value to 1000. Also change the #main wrapper width to 540. What we just did was change the width of your blog in order to fit in the third column. You can always come back and tweak it later to make it a little bigger if you want to.

3- Now, scroll further down to where you see #sidebar-wrapper. You are going to copy that entire section and paste it directly below. Add the word left- in front of sidebar-wrapper.

* If you want your two columns to the right skip step #4.

4- This step is ONLY if you want one column on either side of your post area.

Notice that both the #sidebar-wrapper and the #left-sidebar-wrapper read float: $endSide;

You are only going to change the #left-sidebar-wrapper. Change it to float: $startSide;

5- Next, we are going to change the template so that it recognizes that we have just added this additional sidebar and that we want to you use it. You are going to scroll almost all the way down until you see

<div id='main-wrapper'>

Copy this code:

and paste it above <div id='main-wrapper'>

When you click Preview or save the changes and try to view your blog, you will not see the new sidebar. That is because you do not have any elements/widgets here.

You need to go to Layout and go to Page Elements so that you can drag widgets onto your new sidebar.

* You may need to go back to the (left-)sidebar-wrapper and/or main-wrapper and adjust the width, padding or margins in order to fill up the space of your Outer-Wrapper. Add up the width of the sidebars and main post area (including padding and margins) and make sure they do not exceed the width of the outer-wrapper (we set it to 1000px in this tutorial). Widths depend on your individual design so you can play around with the numbers and "preview" your blog until it looks right.