Creating 2 Sidebars for your template

Wish to have 2 sidebars for your template? Its no “Rocket Science”. You just need to follow these steps:
1>Go to Layout-> Edit Html->Backup your current template
2>Search for this code:
#sidebar-wrapper { width: 220px; float: right; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

3>When found, copy the code found and paste it right below the same code making the following changes shown in Red
#left-sidebar-wrapper { width: 220px; float: left; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

This will create a CSS code for your Left sidebar. Now,we need to create HTML code for the new left sidebar.

4>Now search for this code: <div id=’main-wrapper’>  and immediately before this section,paste this code:
<div id=’left-sidebar-wrapper’> <b:section class=’sidebar’ id=’left-sidebar’ preferred=’yes’/> </div>

Now you have created both CSS and HTML Code for the New Left Sidebar.

5>When you preview you template,you will notice that your Right Sidebar would have shifted to the bottom. This is because, you need to resize the Outer-Wrapper to fit in both your sidebars.
So,search for :
#outer-wrapper { width: 660px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; }
and change the width to say 880

6>Now,when you preview your blog, you will notice that left sidebar is very close to your blog posts. So,just add a minute code (shown in red below) in this code:

#main-wrapper { width: 410px; float: left; margin-left: 20px; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

7>Save your template. View your blog! Enjoy your new 3 Columnar Template with 2 Sidebars!



Howdy!! I am a Blogger,a Writer and a Cartoonist! I maintain around 14 blogs ranging from cartoons,food,travel,photography,sci tech,music to reviews on books and movies.
This entry was posted in Uncategorized and tagged . Bookmark the permalink.

17 Responses to Creating 2 Sidebars for your template

  1. Reetha says:

    Dear swathi, U have a bunch of great blogs.. thanks for visiting my blog and i recommeneded ur blog to my sis..Riya..Great works

  2. Reetha,Thanks a lot for your comments!Your blogs are AWESOME too! :)Thanks for the recommendations. 🙂

  3. Anonymous says:

    good one! i just made lots of fresh emo backgrounds in my blog

  4. hi, i tried to the above but im facing some probs:1) my blog becomes slow2) all my widgets on the right sidebar come below in spite of doing everything you asked me to do…can you help me?

  5. Hi Adithya,First of all Thanks for dropping by.Regrading your problems:1>Your blog may be slow because of presence of Lots of gadgets on the sidebars2>Regarding shifting of gadgets from ur right sidebar to below,make sure you have changed the code in step 6 correctly!If the problems still persist, could you please email me your template code so that I can make the modifications and send u back?You can email to the email id by clicking on "Contact Me" button on my blog!Thanks

  6. thanks a lot… ill mail you my html code… i think the left margin size that you have specified in step 6 is too broad for my blog and hence the error is taking place

  7. Sure,do email me the code.. I ll look into it 🙂

  8. Elizabeth says:

    you rock my world. i have been wanting to do this for quite some time. looking forward to reading some more of your tricks!elizabeth(

  9. Elizabeth says:

    one other thing, i got my left sidebar now. awesome!but things look a little cramped. how do i widen things out? i played with that 20px part and it pushed the right in toward the body. thanks! you rock!-Elizabeth(

  10. Elizebeth,Thanks a lot for implementing it and liking my idea :)I can help u regarding cramping if u can let me know the widths of the following:1>Outer wrapper/main wrapper2>left sidebar wrapper3>right sidebar wrapper

  11. TaraBeara says:

    Hey thanks so much!I tried copying some of the codes but it says it copy righted…help!

  12. @Tara,try using ctrl+c instead of right clicks as I have disabled right clicks on my blog!

  13. TaraBeara says:

    I've done exactly what you said, but its not working!!all my sidebar stuff is still at the bottom of the page and every thing has shifted to the far left of my screen!!I don't know what happened!! Help me!

  14. TaraBeara says:

    Nevermind!! I just forgot to do the 880.:)

  15. Tera,I m sorry for the late reply.. was ur problem fixed?

  16. TaraBeara says:

    Yes lolI'm not sure what I did the first time, but now when I do it, it works perfectly!Thanks!

  17. glad to know that ur problem is fixed now 🙂

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s