Adding a second sidebar to your Blogger template

Have you been struggling to change your default two column blog template to a more flexible three column one? You can do it in 15 minutes or less with a little math and some copy/paste skills.

Before you begin making any changes, back up your current template. If you are already using Minima, you're in luck, it is the easiest Blogger template to customize. We're focusing on converting more recent Blogger templates, sometimes referred to as Blogger Beta templates.

Making room for an additional sidebar is going to require increasing the width of the Outer-wrapper and the Header-wrapper div styles. We'll use a formula since the width of your blog might not match the width of mine.
Find your ideal width using the following formula:

First find the extra padding by subtracting your main-wrapper + sidebar width from your outer-wrapper width:
extra padding = outer-wrapper width - (main-wrapper width + sidebar-wrapper width)

A template with default Minima widths would look like this when applying the formula:
extra padding = 660 - (410 + 220)
extra padding = 30

Template width formula:
outer-wrapper= main-wrapper width + (sidebar width x 2) + extra padding

The math for a default Minima blog template width formula should look like this:

outer-wrapper = 410 + (220 x 2) + 30
outer-wrapper = 860

Now we know what the overall width of the template we can apply it. everywhere we see our old template width we'll replace it with our new outer-wrapper width. ( like in the #header-wrapper style)


After we've edited the styles it is time to add a new sidebar div tag to the XML tag portion of the template. We will add the new tag directly after the closing div tag for the crosscol-wrapper div. Type
<br /></text><div id="'sidebartwo-wrapper'"><br /> <b:section class="'sidebar'id=" preferred="'yes'"><br /></b:section><br /> </div>
just below that closing crosscol-wrapper div and before the main-wrapper div. Your results should look like this:
<div id="'content-wrapper'"><br /> <div id="'crosscol-wrapper'" style=""><br /> <b:section class="'crosscol'" id="'crosscol'" showaddelement="'no'/"><br /> </b:section></div><br /><div id="'sidebartwo-wrapper'"><b:section class="'sidebar'" id="'sidebartwo'" preferred="'yes'"><br /></b:section></div><div id="'main-wrapper'"></div></div>
Save the template. Now we can add widgets to the new sidebar. Click on the Page Elements sub tab under Layouts and drag widgets over to the new sidebar. Save and view the results.

You can experiment with placing the sidebar in other locations like directly under the main-content wrapper div ending tag or below the ending div tag of the original sidebar.

Want to know more about styling the template for another sidebar? It's all in chapter 2 of my book Blogger Beefed Up, coming out this summer from Packt Publishing. Once the book is released I'll be uploading extra code and images about this and other hot Blogger topics. You'll also be able to download sample pages from the book on Packt's site and get ebook and printed book discounts for ordering early.