Tech Space

Recently i have been into blogging and i started to play around with blogger templates to achieve the look i want. i found this is somehow tricky for some people after i saw a lot of posts around.

Today i will write about adding additional side bar to your blog and make them on the outer sides of the page.

first lets look at what we need in the template:
This is the CSS part that we will need to change in it

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

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

#sidebar-wrapper {
width: 220px;
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 */
}

#outer-wrapper : is the main holding container that hold all the elements inside our blog
its width is 660px and float to left
#main-wrapper: hold the blog posts, its width is 410px
#sidebar-wrapper: hold the side element which we need to add another one of it,its width is 220px

so 410+220 =630 + 20px (for padding) =650px

to add another side bar we have to get it space to live in.

here it is we have to modify #outer-wrapper to width :860

then lets add another CSS element

#sidebar-wrapper-left {
width: 220px;
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 */ }

now we can add the new side bar Div in the body section :


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