Sunday, April 22, 2012

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 blogger 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.



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.

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...