How to add multiple sidebars to you blogger layout

Here's how you add a main sidebar with two columns beside each other, and a wider one-column area below.



Having two sidebars beside your blog's article body maximizes the space of your site. This is especially helpful for bloggers who incorporate ads and multiple widgets for decoration and flavor. However, I found out that viewing a 180px width Blog Archive widget makes it virtually unreadable in small(er) screens. That is why I decided to maximize the total width of my two slim sidebars to host the wide Blog Archive widget.

Part I. Reduce the width of your existing sidebar to make room for an additional sidebar

1. Sign-in to you Blogger account.
2. On the upper right corner (the Blogger task bar) click on "Customize" to go to your Blogger editor.
3. On your Blogger editor view, click on "Layout" tab, then click on "HTML" sub header.
**Be sure to save a copy of your HTML layout before making any changes for back up.
4. Find (CTRL+F) the following text: #sidebar (you either have #sidebar or #sidebar-wrapper if you're using a regular Blogger template)
5. Inside the parentheses of #sidebar, edit float and width parameters into:

#sidebar-wrapper {
...
float: $startSide
width: 170px
...
}

Note: we reduced the width of your sidebar to make room for the second sidebar.

Part II. Add a second sidebar to your regular Blogger layout

1. Find the following text: <div id="sidebar-wrapper">

IMPORTANT: if you neither have <div id="sidebar-wrapper"> nor <div id="sidebar"> then try changing "sidebar-wrapper" into 'sidebar-wrapper'. If your Blogger Layout HTML code uses singe quotes instead, then be sure to adjust the codes presented here accordingly.

2. Beneath that div section, copy the following code:

<div id="sidebar-wrapper">
    <b:section class="sidebar" id="sidebar" preferred="yes">
    <b:widget .../>
    </b:section>
</div>

Widget Note: The b:widget line is where you put the content of your sidebar. One b:widget line per content, arrange them according to how you want to stack them on top of each other. Simply copy the format from your existing sidebar div. If you're wondering what HTML1, HTML2, etc. are, then switch to your Page Element view (sub header below Layout) to determine which of your widgets are HTML1, etc.

div ID Note: The <div id="sidebar-wrapper"> line tells your layout to follow the settings defined in #sidebar (padding, font, colors, width, etc.). If you have #sidebar then you should edit your code to <div id="sidebar">.

Part III. Wrap these 2 sidebars in one main sidebar element

1. Go back to your #sidebar-wrapper code
2. Above it, add the following code:

#sidebar-MainWrapper {
width: 350px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: auto; /* fix for long non-text content breaking IE sidebar float */
padding: 10px 0 0 0
}

#sidebar wrapper note: if your #sidebar definition has the padding attribute, edit it accordingly. Know that it will inherit whatever padding attributes are in your new #sidebar-MainWrapper when we're done.

Width attribute note: The defined width that I provided is 345 because 2 sidebar widths = 170px * 2 = 340px. The additional 10px is for the space you may want to put in between the sidebars. In order to incorporate this space, just edit your padding: 0 5px 0 0 in you #sidebar definition. (Notice that I removed the first 10px, because the #sidebar-mainWrapper already has it).

3. Look for the first occurence of <div id="sidebar-wrapper"> (there are two of these because we added an additional one a while ago)
4. Wrap the two <div id="sidebar-wrapper"> with <div id="sidebar-mainWrapper"> like the following:

<div id="sidebar-mainWrapper">
    <div id="sidebar-wrapper">
    ...
    <div/>
    <div id="sidebar-wrapper">
    ...
    <div/>
<div/>

Part IV. Add a wide, third sidebar element below the two narrow sidebars

1. Find <div id="sidebar-mainWrapper">
2. Below it, add the following:

<div id="sidebar-MainWrapper">
    <b:section class='sidebar' id='sidebarBelow' preferred='yes'>
    <b:widget id='BlogArchive1' locked='false' title='Archive' type='BlogArchive'/    >
    </b:section>
</div>

This code will add the blog archive beneath the two narrow sidebars in your layout.