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 {Note the text in red is if you have an image in your header, which I do. Otherwise, let that part out.
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
background: #fff url(Your header image if you have one) no-repeat top right;
}
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:
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.
/* 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;
}
7/12/2006 Please read Two sidebars in blogger- Part 2 for more information on implementing this code.
No comments:
Post a Comment