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

-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:

   

      
   

   

      

         
      

      

         
      

   

   

      
   

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:

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.