Monday, January 4, 2010

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!

Blogger Templates
Blogger Templates
Twitter Delicious Facebook Digg Stumbleupon Favorites More

17 comments:

Reetha on January 21, 2010 at 5:47 AM said...

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

Swathi Pradeep on January 21, 2010 at 5:49 AM said...

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

Anonymous said...

good one! i just made lots of fresh emo backgrounds in my blog
http://www.emo-backgrounds.info

Aditya Tibrewala on February 23, 2010 at 6:29 AM said...

hi, i tried to the above but im facing some probs:

1) my blog becomes slow
2) all my widgets on the right sidebar come below in spite of doing everything you asked me to do...

can you help me?

Swathi Pradeep on February 23, 2010 at 8:49 AM said...

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 sidebars

2>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

Aditya Tibrewala on February 24, 2010 at 9:32 PM said...

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

Swathi Pradeep on February 25, 2010 at 5:22 AM said...

Sure,do email me the code.. I ll look into it :)

Elizabeth on February 25, 2010 at 11:53 AM said...

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
(www.myrealitybit.com)

Elizabeth on February 25, 2010 at 12:11 PM said...

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
(www.myrealitybit.com)

Swathi Pradeep on February 25, 2010 at 12:17 PM said...

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 wrapper
2>left sidebar wrapper
3>right sidebar wrapper

TaraBeara on April 19, 2010 at 5:33 PM said...

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

help!

Swathi Pradeep on April 19, 2010 at 6:56 PM said...

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

TaraBeara on April 26, 2010 at 9:53 AM said...

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!

TaraBeara on April 26, 2010 at 1:07 PM said...

Nevermind!! I just forgot to do the 880.

:)

Swathi Pradeep on April 26, 2010 at 3:34 PM said...

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

TaraBeara on April 26, 2010 at 8:04 PM said...

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

Thanks!

Swathi Pradeep on April 27, 2010 at 6:54 AM said...

glad to know that ur problem is fixed now :)

 

Networked!

Disabling Right Clicks

Recent Readers

Recent Visitors

Recent Viewers

Blog Metamorphosis Copyright © 2009 WoodMag is Designed by Ipietoon for Free Blogger Template

--added by swathi