Left Sidebar...123

1.)
Left-Sidebar code to go in css

/* ----------------------------------------------- Blogger Template Style Name: 3 Column Rounders Designer: Webfixer URL: http://webfixer.blogspot.com Date: 3 May 2008 ----------------------------------------------- */ #left-sidebar-wrap { width:240px; float:$startSide; margin:15px 0 0; font-size:97%; line-height:1.5em; 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 */ } #left-sidebartop-wrap { background:$topSidebarBgColor url("http://www.blogblog.com/rounders2/corners_prof_bot.gif") no-repeat $startSide bottom; margin:0px 0px 5px; padding:0px 0px 10px; color:$topSidebarTextColor; } #left-sidebartop-wrap2 { background:url("http://www.blogblog.com/rounders2/corners_prof_top.gif") no-repeat $startSide top; padding: 10px 0 0; margin:0; border-width:0; } #left-sidebartop h2 { line-height:1.5em; color:$topSidebarHeaderColor; border-bottom: 1px dotted $topSidebarHeaderColor; margin-bottom: 0.5em; font: $headerFont; } #left-sidebartop a { color: $topSidebarLinkColor; } #left-sidebartop a:hover { color: $topSidebarVisitedLinkColor; } #left-sidebartop a:visited { color: $topSidebarVisitedLinkColor; } #sidebartop-wrap { background:$topSidebarBgColor url("http://www.blogblog.com/rounders2/corners_prof_bot.gif") no-repeat $startSide bottom; margin:0px 0px 15px; padding:0px 0px 10px; color:$topSidebarTextColor; } #sidebartop-wrap2 { background:url("http://www.blogblog.com/rounders2/corners_prof_top.gif") no-repeat $startSide top; padding: 10px 0 0; margin:0; border-width:0; } #sidebarbottom-wrap1 { background:$mainBgColor url("http://www.blogblog.com/rounders2/corners_side_top.gif") no-repeat $startSide top; margin:0 0 15px; padding:10px 0 0; color: $mainTextColor; } #sidebarbottom-wrap2 { background:url("http://www.blogblog.com/rounders2/corners_side_bot.gif") no-repeat $startSide bottom; padding:0 0 8px; } #left-sidebarbottom-wrap1 { background:$mainBgColor url("http://www.blogblog.com/rounders2/corners_side_top.gif") no-repeat $startSide top; margin:0 0 15px; padding:10px 0 0; color: $mainTextColor; } #left-sidebarbottom-wrap2 { background:url("http://www.blogblog.com/rounders2/corners_side_bot.gif") no-repeat $startSide bottom; padding:0 0 8px; } .left-sidebar .widget { margin:.5em 13px 1.25em; padding:0 0px; } .left-sidebar h2 { margin:0; padding:0 0 .2em; line-height:1.5em; font:$headerFont; } .left-sidebar ul { list-style:none; margin:0 0 1.25em; padding:0; } .left-sidebar ul li { background:url("http://www.blogblog.com/rounders/icon_arrow_sm.gif") no-repeat 2px .25em; margin:0; padding-top:0; padding-$endSide:0; padding-bottom:3px; padding-$startSide:16px; margin-bottom:3px; border-bottom:1px dotted $borderColor; line-height:1.4em; } .left-sidebar p { margin:0 0 .6em; } #left-sidebar h2 { color: $postTitleColor; border-bottom: 1px dotted $postTitleColor; } .left-sidebar .clear, .main .widget .clear { clear: both; }

2.)
Edit css code in these areas

#outer-wrapper { width:995px; margin:0 auto; text-align:$startSide; font: $bodyFont; } #main-wrap1 { margin:15px 15px; #header-wrapper { background:$titleBgColor url("http://i265.photobucket.com/albums/ii224/webfixer/corners_cap_top.gif") no-repeat $startSide top; #header { background:url("http://i265.photobucket.com/albums/ii224/webfixer/corners_cap_bot.gif") no-repeat $startSide bottom; #footer-wrap2 { background:$titleBgColor url("http://i265.photobucket.com/albums/ii224/webfixer/corners_cap_top.gif") no-repeat $startSide top; #footer { background:url("http://i265.photobucket.com/albums/ii224/webfixer/corners_cap_bot.gif") no-repeat $startSide bottom; /** Page structure tweaks for layout editor wireframe */ body#layout #main-wrap1, body#layout #left-sidebar-wrap, body#layout #sidebar-wrap, body#layout #header-wrapper { margin-top: 0; } body#layout #outer-wrapper { width: 995px; }

3.)
Code to go in BODY above the Main-wrap1
click for details

<div id='left-sidebar-wrap'> <div id='left-sidebarbottom-wrap1'><div id='left-sidebarbottom-wrap2'> <b:section class='left-sidebar' id='left-sidebar' preferred='yes'/> </div></div> <div id='left-sidebartop-wrap'><div id='left-sidebartop-wrap2'> <b:section class='left-sidebar' id='left-sidebartop'> </b:section> </div></div></div>

Basically you add a Left sidebar to any template the same way
The resized images...you can use my links or copy and add to your server
Always preview before saving template
If you get errors...just clear edits
Once you save your template...go to page elements and drag over from right sidebar or add new elements to the left sidebar
By adding the left sidebar this way...should be no way to lose your widgets