How to add two sidebar columns below main sidebar in Blogger

Sometimes we need to add two sidebar columns below main sidebar to show advertisements or to add some gadgets. If you want to add it in your blogger template just like me then follow some simple steps.

add two sidebar columns
Select “Template  and take “backup”of your template as mentioned below and click on “Edit HTML”.
add two sidebar columns


Step-1:  Look for the below section in your HTML code.

Note: It could be anything in case of your template so look for the wrapper as mentioned in your code.

#rsidebar-wrapper{width:326px;float:right;margin:0px;padding:0px 0px 0px 0px;word-wrap:break-word;overflow:hidden;}

Or

#lsidebar-wrapper{width:326px;float:right;margin:0px;padding:0px 0px 0px 0px;word-wrap:break-word;overflow:hidden;}

Or

#sidebar-wrapper{width:326px;float:right;margin:0px;padding:0px 0px 0px 0px;word-wrap:break-word;overflow:hidden;}

Step-2:  When you find the above wrapper code then add following codes just below it.

#right-side-col {width:48%;float:right;word-wrap:break-word;overflow:hidden;}

#left-side-col {width:48%;float:left;word-wrap:break-word;overflow:hidden;}

Step-3:  Look for another section; here I am taking example of right side wrapper.

<div id='rsidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</div>
Step-4: Now you have to put following two lines in below <b:section……/> of above code:

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

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

Example:

<div id='rsidebar-wrapper'>

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

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

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

</div>

Click on save, If you are getting XML error just like me then you must be having some widgets in your sidebar. Following example will help you to get out of this problem.

Example in case of XML error:

<div id='rsidebar-wrapper'>

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

< ..widgets here.. >
</b:section>

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

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

</div>

Now save your html template and check your web page.

1 thought on “How to add two sidebar columns below main sidebar in Blogger”

  1. bharath kumar

    Hiii Bro,
    I want an help form u.
    That I want to costumise my home page.
    Can u help me Plzzzzzz?

    I want to Separate my publishied posts by according to label(or)catagory.
    These labels are to be present as box wise on home page.
    I u can’t understand plzzzzzzz look at
    Raagalu.in
    And I want like that Plzzzzzzzzzz send me the cobe Bro.
    I will be thankfull to u .

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top
Scroll to Top