if you have a lot of widgets in your blog.probably you hope to change your two-column blog into three-column.here is a method,of course different
blog has differnt conditon,you can change according to your blog's condition.but remember save your template before changing your template.
1.in our blogger we control our page through the following three parts:
#outer-wrapper -define the entire page
#main-wrapper - define the article part
#sidebar-wrapper - define the sidebar part
2.now we add an column,we need define the second sidebar-wrapper.we name the wrapper the left sidebar-wrapper.cause most of the settings are the same,so we only need to copy and paste sidebar-wrapper,then modifying a little is enough.
3.we need to make sure the width of each column. my recommendation is outer-wrapper:860px,main-wrapper:400px,two sidebar-wrappers:each220px.make sure outer>main+sidebar*2.
4.modify CSS,check the "expand widget templates".finding out the corresponding place to change in your template.following is an example.if you need to adjust the interval between the the page and margin please fine-tune the corresponding margin value.we control the displaying of different sidebar position through "float".and if you want to let your two sidebar displayed in the same side.you need to adjust the both on the same left or right.
#outer-wrapper {
width: 860px;
...
}
#main-wrapper {
width: 400px;
...
...
}
#main-wrapper {
width: 400px;
...
}
#sidebar-wrapper {
width: 220px;
float: right;
...
}
#leftsidebar-wrapper {
#sidebar-wrapper {
width: 220px;
float: right;
...
}
#leftsidebar-wrapper {
width: 220px;
float: left;
...
}
float: left;
...
}
5.after defining css,we need to define one leftsidebar part again,
now close up the "expand widget templates",about in the lowest
part you will see the code as follows,adding the red part
<div id='leftsidebar-wrapper'>
<b:section class='sidebar' id='leftsidebar' preferred='yes'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
</div>
the followingis the result before modifying: