Two sidebars in blogger -Part 1

One reason I choose the Minima template in blogger is because of it's simplicity and the ease I am able to modify the design. One of the design modifications I made is adding another sidebar.

To get the sidebar in without distorting my header, I first had to add this code to the template. I put it right below the 'header' portion of my CSS sheet.

#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
background: #fff url(Your header image if you have one) no-repeat top right;
}

Note the text in red is if you have an image in your header, which I do. Otherwise, let that part out.

What is a sidebar?
"
This is from the Blogger Help section...Getting more to the point, many bloggers find that a sidebar running down the page parallel to the main blog is a convenient spot to publish a short biography, favorite links, and other relevant information that you want near (but not in) your blog.
"

The next thing that you need to do is add this code to your CSS sheet:

/* Sidebar Content
----------------------------------------------- */
#sidebarleft ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #ccc;
list-style:none;
}
#sidebarleft li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}
#sidebarleft p {
color:#666;
line-height:1.5em;
}
#sidebarleft {
width:200px;
float:left;
}
#sidebarright ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #ccc;
list-style:none;
}
#sidebarright li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}
#sidebarright p {
color:#666;
line-height:1.5em;
}
#sidebarright {
width:200px;
float:right;
}

I'm sure there are a million different ways to do this. But this was simple and worked great for me, as you can tell.

7/12/2006 Please read Two sidebars in blogger- Part 2 for more information on implementing this code.