How to Create a Three Column Blog

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: 
<div id="left-sidebar-wrapper"><b:section class="sidebar" id="left-sidebar" preferred="yes"></b:section></div>

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.


Post a Comment

Share This Post

Related Posts with Thumbnails