Add Two Sidebar Columns below Main Sidebar in Blogger

 If you want to add two small sidebar columns below main sidebar in your Blogger template, then I will tell you how to do it.

Example :

So let's start!

First go to Design > Edit HTML and backup your template.

1. Find the below section:

#sidebar-wrapper {

width:220px;

float:right;

word-wrap:break-word;

overflow:hidden;

}

2. And just below it add the following codes:

#right-col {

width:48%;

float:right;

word-wrap:break-word;

overflow:hidden;

}

#left-col {

width:48%;

float:left;

word-wrap:break-word;

overflow:hidden;

}

3. Now find:

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'/>

</div>

4. And add the bold codes or replace the whole code with:

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'/>

<b:section class='sidebar' id='left-col' preferred='yes'/>

<b:section class='sidebar' id='right-col' preferred='yes'/>

</div>

These bold snippets are added which would actually add two widget sections below the main sidebar.

Preview your template for any errors and save it.

Update: Some of you are having trouble adding the two small sidebar columns in their templates and may be getting an XML error. So, here's the solution:

You must be having widgets in your sidebar like:

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

< ..widgets here.. >

</b:section>

</div>

Put the bold codes below </b:section> as shown below:

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

< ..widgets here.. >

</b:section>

<b:section class='sidebar' id='left-col' preferred='yes'/>

<b:section class='sidebar' id='right-col' preferred='yes'/>

</div>

Now go to Design > Page Elements and check for your newly added two small sidebars below you main sidebar.

Posted By: Unknown - Thursday 29 November 2012