Adding a second sidebar to your template

The Challenge

Now that we have learned about the section, it is fairly easy to add a second sidebar to your template. And what is even better: you can maintain this sidebar from the Blogger Beta Page Element layout screen!

How it works

The Blogger Beta template uses <div>-tags for several "wrappers".
The header is inside the Header-wrapper. The sidebar is inside the Sidebar-wrapper. The main section is inside the Main-wrapper, and the footer is inside the Footer-wrapper.
Main-wrapper and Sidebar-wrapper are inside the Content-wrapper.
And Header, Content, and Footer are surrounded by the Outer Wrapper.

The code looks like this:


<div id='outer-wrapper'>
    <div id='header-wrapper'>
      <b:section id='header' class='header' ....>
   </div>
   <div id='content-wrapper'>
      <div id='main-wrapper'>
         <b:section id='main' class='main' ....>
      </div>
      <div id='sidebar-wrapper'>
         <b:section id='sidebar' class='sidebar' ....>
      </div>
   </div>
   <div id='footer-wrapper'>
      <b:section id='footer' class='footer' ....>
   </div>
</div>
You will easily recognize this structure from your template.

You can add a left-sidebar in 3 easy steps:

Add a new wrapper for the left-sidebar to your template, inside the content-wrapper and in front of the main-wrapper.
Add a new section inside this wrapper, with a unique ID (for example leftsidebar) and set its class to 'sidebar'.

This is the code:

<div id='leftsidebar-wrapper'>
<b:section id='leftsidebar' class='sidebar' preferred='yes'/>
</div>
In the head of your template add css-code for a #leftsidebar-wrapper element, and set it to float left.
Adjust the width of your sidebars and your main-wrapper to fit the screen.

Editing your new sidebar
Now go to the layout-editor, and you will see the new sidebar to the left in your Page Elements Screen, and you can add new page elements to your new sidebar.