HOW TO MAKE A 3 COLUMNS TEMPLATE FOR YOUR BLOG ?

Ever wonder how to make a 3 columns template
for your blog ?

Great ! if this is what you are looking for, i might have the right answer for you.
Below is step-by-step instructions to alter your web blog design template HTML.

Before we start, make sure that your existing choice of default template is
minima by Douglas Bowman (a 2-columns template).

LETS START !

STEP 1
go to TEMPLATE/EDIT HTML

STEP 2
do a quick back-up of existing html
i recommend select all (ctl-a) and then copy (ctl-c) the html
within the window and paste (ctl-v) on a notepad (.txt format)

STEP 3

go to your CSS code to make changes to the following

as current width does not allow enough space for a 3-columns template.

find

#header-wrapper {
width: 660px;

margin:0 auto 10px;
border:1px solid $bordercolor; }

change to

#header-wrapper {
width: 860px;

margin:0 auto 10px;
border:1px solid $bordercolor; }

STEP 4

scroll down further to find the following

find

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

change to

#outer-wrapper {
width: 860px;

margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont; }

STEP 5

now, we scroll very far down to the html code

within <>...< /body >

find

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

change to

< id="'right-sidebar-wrapper' >
< class="'sidebar'" id="'right-sidebar' preferred='yes' >

< /b:section >< /div >

STEP 6

next, we must add a left-sidebar-wrapper

in < id="'content">...< /div >

find

< id="'content-wrapper'">
< id="'main-wrapper'">
< class="'main'" id="'main'" showaddelement="'no'">
< id="'Blog1'" locked="'true'" title="'Blog" type="'Blog'/"> < /b:section >< /div >
< id="’sidebar-wrapper'">
< class="'sidebar'" id="'sidebar'" preferred="'yes'">

< /b:section >< /div >

change to

< id="'content-wrapper'">
< id="'left-sidebar-wrapper'">
< class="'sidebar'" id="'left-sidebar'" preferred="'yes'">

< /b:section >< /div >
< id="'main-wrapper'">
< class="'main'" id="'main'" showaddelement="'no'">
< id="'Blog1'" locked="'true'" title="'BlogPosts'" type="'Blog'/">
< /b:section >< /div >
< id="'right-sidebar-wrapper'">
< class="'sidebar'" id="'right-sidebar'" preferred="'yes'">

< /b:section >< /div >

STEP 7

the final change. go back to CSS code

find

/* Outer-Wrapper-------------------------------- */

#outer-wrapper {
width: 860px;
margin:0 auto;
padding:10px;

text-align:$startSide;
font: $bodyfont; }

#main-wrapper {
width: 420px;
padding:10px;
float: $startSide;
word-wrap: break-word;
overflow: hidden; }

#right-sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word;

overflow: hidden; }

change to

/* Outer-Wrapper------------------------------- */

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

#left-sidebar-wrapper {
width: 180px;
float: $startSide;
word-wrap: break-word;
overflow: hidden; }

#main-wrapper {
width: 420px;
padding:10px;
float: $startSide;
word-wrap: break-word;
overflow: hidden; }

#right-sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word;
overflow: hidden; }

STEP 8

the final step. save template and go to page elements.

VOILA ! YOU SHOULD BE SEEING SOMETHING BELOW ...

(your page elements will look similar to mine,not 100% the same)

CONGRATULATIONS !

your blog is now a 3-columns template design.

Thank you for following my step-by-step instructions.

Do leave your positive comments if you find this useful...