HOME
<div id='content-wrapper'> <div id='crosscol-wrapper' style='text-align:center'> <div id='left-sidebar-wrapper'> <div id='main-wrapper'> <div id='sidebar-wrapper'> change it to => <div id='right-sidebar-wrapper'> 3. Save then you got your three columns blogger template.
Adding three columns is a best way to add more space for your template. Before adding three columns. All you have to do is :
1. Create a new blog for testing or back up your template. My suggestion is create a new blog for test.
2. This code works for my blog, if this code not work for your blog, PLEASE DON"T BLAME ON ME.
3. Before i write, i already test 6 times and revised until perfect(for me).
- Change a code like :
1. in outer wrapper :
#outer-wrapper {
width: 660px; change ===> width 100%;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
Write ====>margin-$endSide: 1.5%;
width: 410px; change ====> width : 50%;
float: $endSide; change ====>float: left;
===> display: inline;
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 { change ====> #left-sidebar-wrapper {
write ====> margin-$startSide: 1%;
width: 220px; change ====> width: 27%;
float: $startSide; change ====> float: left;
write ====> display: inline;
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 */
}
#right-sidebar-wrapper {
width: 22%;
float: right;
word-wrap: break-word;
overflow: hidden;
}
2. Now change a code between <body> </body>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
<b:section class='sidebar' id='left-sidebar' preferred='yes'>
</b:section>
</div>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<b:section class='sidebar' id='sidebar' preferred='yes'> change it to =><b:section class='sidebar' id='right-sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
</b:section>
</div>
Friday, June 20, 2008
Adding Three Columns
Newer Post
Home
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment
Your Comments please...