Three Columns Minima Template

The typical new Blogger Minima Template has only one sidebar. We can add a third column to the left, to have two sidebars. This maximizes the space, and allows greater flexibility in adding page elements to the sidebar.

Note that this guide is for those who want to
convert their Minima template into a three column template by adding
another sidebar. In our Rounders Template
article, we have explained why the Rounders, Scribe, No. 897 or other
templates are different and how the background images should be changed
in order to cater to the new layout. We shall try to create new test
blogs under different templates and post the tutorials once we have
converted them into three column templates.

Before you
begin to do anything, remember to backup your template. Go to Template
-> Edit HTML. Click the “Download Full Template” link to save a copy
of your template

Scroll to the part where you see this:-
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

The template defines 3 wrappers, namely:-

#outer-wrapper – referring to the entire blog
#main-wrapper – referring to the main Blog Posts
#sidebar-wrapper – referring to the right sidebar.

To add another sidebar, copy the part highlighted in red and paste it immediately after that, but rename the “#sidebar-wrapper” to “#newsidebar-wrapper”.

Next,
adjust the width settings of all the wrappers. For this example, I used
what is commonly used by many people i.e., 750px for outer-wrapper,
400px for main-wrapper, and 150px for sidebar-wrapper. You can of
course change these values, so long as the total widths of both
sidebar-wrappers and the main-wrapper do not exceed the width of the
outer-wrapper.

Also, fix the left margin of the main wrapper but
allow the newsidebar to float to the left, leaving the original sidebar
on the right.

Your template should now read something like this:-

#outer-wrapper {
width: 750px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 400px;
margin-left: 25px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 150px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#newsidebar-wrapper {
width: 150px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Update:

We shall also change the layout editor to cater to the new width. Scroll to where you see this and add the lines

** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
}

body#layout #outer-wrapper,
body#layout #header-wrapper,
body#layout #footer {
width: 750px;
padding: 0px;
}

body#layout #main-wrapper {
width: 400px;
margin-left: 20px;
}

body#layout #sidebar-wrapper,
body#layout #newsidebar-wrapper {
width: 150px;
}

Blog Posts in the Center

This
sets the style sheet for the template. We will now need to add a
section in the body of the template. Scroll to somewhere near the
bottom of the script where you see this.

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</div>

Add the portion above the div id='main wrapper'. The segment should look something like this:-

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</div>

he
code will give you a newsidebar on the left, main post in the middle,
and leave the current sidebar on the right, just like what you see in
this Blog.

Blog Posts on the Left

If, for example, you want the main post on the left, and both sidebars on the right, you will put the portion below the div id='main wrapper'. It will look like this:-

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</div>

Change Width of Header and Footer

One
more thing. If you have a wider layout, you may also want to lengthen
the width of your Header and Footer. Go to the part of your template
that says this:-

#header-wrapper {
width:660px;


and

#footer {
width:660px;


You can change the number in red.
In this example, I may want to widen it to the same width as that of
the outer-wrapper. I will therefore change the above codes to this:-

#header-wrapper {
width:750px;


and

#footer {
width:750px;


You
may click “Preview” to see the new layout, and if you are happy with
what you see, click “Save Template”. If you don't want the profile on
the left, you can remove that page element after that. You have now
three columns in your layout!



Note:

If
you are using the old Blogger templates, or any other template, the
style names may be different. For example, #header-wrapper may be
called #head-wrap. If you are unsure, you may source the net for a
guide specifically for your type of template. Otherwise, you may want
to understand the way we change this template and adapt it to yours. As
long as you backup your current template, and Preview the changes made,
it should be alright for you to try some changes.