Add Two Sidebar Columns below Main Sidebar in Blogger
I have told you about creating three columns in Blogger template. Many of us try to avoid this as it may sometimes look clumsy but we need widget sections to add some gadgets. Now 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.
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.
To be Noted:
This works only with layout templates.
