Sunday, January 13, 2008

Make more Column for Blog

How to make more sidebar for blog? It's a problem to many new bloggers. If you want more sidebar making become easy, you should use template Minima, because it's the template which has the simpliest constituent. In this post, I'll use template Minima, following my guidance and do the same with your template.
Thereinafter is the image you can see in Page Elements of template Minima:












Making more sidebar for template has two steps:
1) Name and make ordinances of physical characteristies for your template.
Watch the below code:
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
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: $endSide;
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 */
}


Do the first step with this code.
outer-wrapper : contains header, main, sidebar and footer. In the above code, width of outer, main and sidebar round-robin is 660px, 410px, 220px. If you want to make one more sidebar, you need broaden outer . Units of length can be used here are
px and % .
I'll change the width of outer, main and sidebar round-robin to become: 100% , 48% , 23%. Then, put this code below the above code:

#newsidebar-wrapper {
width: 23%;
float: $endSide;
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 first step hasn't been over. If you want your post in the middle of 2 sidebars, you must change their Float attribute . I'll change Float attribute of main, sidebar and newsidebar round-robin to become: left, right, left. To change distance between sidebars and main, you must add Margin attributes and padding.
After adding those attributes, you have the below code:

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

#main-wrapper {
width: 48%;
float: left;
margin:0 0 0 20px;
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: 23%px;
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: 23%;
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 */
}


2) Find sidebar's position:

Find the following code:

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

and this's the code you must insert into your template:

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

If you want your main in the middle of 2 sidebars, you must insert the blue code upon the red code. And if you want the newsidebar in the middle of main and sidebar, rechange the position of 2 above codes.

After that, reach 2 below codes:
#header-wrapper {
width:660px;
margin:0 auto 10px;
}

and:

#footer {
width:660px;

clear:both;
margin:0 auto;

padding-top:15px;

line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;

}


Change width of header and footer from 660px to 100% . Save and open Elements, you'll see:












So, you made a template with 3 columns. If you want your template has 4 columns, do the first step but edit width of main, sidebar, newsidebar; at the second step, put code of the new sidebar upon or right below the code of newsidebar.

Thanks for watching my post. Hope to recive comments to make it's content better...
Have a nice day!

1 comment:

mayenskie said...

wow, im so glad to find this post. very informative. thanks for the tip. im gonna try it