Tuesday, January 23, 2007

[Blogger] Adding another Sidebar

I was wondering if anyone can guide me through something that I have been trying for a while. With no luck. I'd like to add a third sidebar on my blog. I put this project aside for awhile thinking to take it up again after the switch to Beta. However, it seems to be taking forever to make the switch to beta and I really need to get that second sidebar up.

I am using what used to be the Rounders 4 template. As you can see after all my changes, there is not much left of it but that is the basis template underneath.

There are 2 things I would like to do:

  1. Extend the entire length of the page (Banner, main posting area) and get the second sidebar up. I have not decided on the exact position - either left, so that the main posting area is in the middle of both sidebars, or on the right, so that the main posting area is on the far left and both side bars are next to each other.

  2. For the sidebars (both the one that is there now and the new one) I would like to be able to break these up so that instead of one long vertical bar, I can have boxes (or sections). If you take a long on my blog, the darker long vertical sidebar is just one long box. I would like to be able to section each category in a separate box, like the profile container is separated from the sidebar container.
I would really appreciate step by step instructions of how to go about doing this. Or simply point me in the right direction where I can read about this.

Thank you in advance!

This Post was written by Meeta from What's For Lunch, Honey?


Anonymous said...

It's very easy to add a second sidebar. In these notes I'm assuming that you want the same basic format (but not necessarily the same contents) in each.

Copy your template from the <!-- Begin #sidebar --> comment to the <!-- End #sidebar --> comment and paste it immediately below. This will create a second sidebar alongside the first and by adjusting the CSS code that defines the column positions and widths you can have three columns. This is not simple by any means.

To achieve the split sidebar, i.e. one below the other, just remove the final </div> from your original sidebar code and remove the initial <div id="sidebar"> from the start of your new sidebar code immediately below.

You can now edit each sidebar separately, adding and removing code so they both look completely different. And, of course, you can repeat the exercise to give you as many separate sections as you like.

If you want different characteristics for the sidebars you need to create new CSS definitions - too complex for me to address here.

I created this example for you in just a few minutes, using Rounders 4:

R4 sidebar test

Hope this helps.

Meeta said...


You are brilliant! I just spent most of my evening getting the individual boxes on my sidebar up. I managed it and it's just the way I want it. Thank you for talking me through this.

For the second sidebar I will have a go at it tomorrow. I think that needs a bit more concentration and time.

When I do finally switch to the new Blogger will I need to do that all over again?

Anonymous said...

No, you won't need to repeat the exercise. When you switch you will take your "classic view" template with you by default.

If you start a new blog it will default to the new user interface and standard templates, but there's an option to select "edit html" rather than use the new interface and once in that mode you can select "revert to classic mode" (or something like that off the top of my head). Then you can cut and paste your preferred template over the default template you have chosen and all will be well.

I forgot earlier to remind you to copy your template and save it in MS Word or similar application on your PC. I do this every day or two. You won't lose posts but it's very easy to lose your template!