Friday, June 26, 2009

Adding A Left Sidebar to your Blogger Blog

Today, I added a second sidebar to my blogger blog. Previously, I had the classic Minima Dark template. I added the new sidebar on the left hand side because there was unused empty space on that side, and I wanted to put an add there (this was suggested by Google heat map for add placement).

These are the steps that you take to add the side bar:
1. Go to layout in your blogger account and click edit html.
2. Scroll down until you see the CSS line that says #outer-wrapper{
3. Change the width for this id to 850px.
4. In the id labeled #main-wrapper delete the line beginning with float.
5. Create the following class

/* Left sidebar
----------------------------------------------- */
.leftside {
width: 195px;
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 */
float: left;
padding: 5px;
margin: 10px 0 0 8px;

6. Scroll down until you see the following code:

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>

7. Underneath of this code add your own code that is the following:

<div class='leftside'>
<b:section id='leftsidebar' showaddelement='yes'>
<b:widget id='your widget' locked='false' title='' type='WidgetType'/>

Note: Your widget line will look different. This will also change your page elements section.



  1. woooooooow ............ its working ... thank you so much for this helpfull post.

  2. where is the edit html option in layout