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.

SiteGround Black Friday Sale Below Banner

Get Free Blogging Tips & Technology updates in your Email !!!

Subscribe via RSS feed

The following two tabs change content below.
Anil Kumar
IT Blogger Tips focus on Blogging Tips, SEO Tips, Social Media, SQL Tips, PL/SQL Tips, Oracle DBA, Linux/Unix, Latest Technology, How Tos and Technical Solutions. You can find us on Facebook | Twitter |
Find on Google+

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

Siteground SALE
70% OFF SiteGround WordPress Hosting – $2.95/month (Exclusive Offer !!!)