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...

WEB DESIGN - tips and tricks

Great web design tips and tricks for sharing.

click on following links to the specific information that you need.
Do leave positive comments for me if you find the links useful.
i will update this page from time to time, so do save this link and check back here.

Enjoy the tips

1. How to make a 3-columns template ?



I hope you will enjoy these.