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'/>
</div>

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'/>
</b:section>
</div>

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

Source: http://testing-blogger-beta.blogspot.com/2006/09/adding-graphic-to-your-blog-header.html

2 comments:

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

    ReplyDelete
  2. where is the edit html option in layout

    ReplyDelete