How to Add a New Sidebar on Left/Right side to Your Blogger Blog Layout.

To add new side bar to your blogger blog layout, you have change your blogger outer-wrapper or main-wrapper width. In two column blogger template there are basically three main components.

1. Outer-Wrapper

2. Main-Wrapper and

3. Sidebar-wrapper

Outer-wrapper represent the whole width of you blog.

Main-wrapper usually represents the post area, the area which shows your posts.

and sidebar-wrapper represents the dimensions of the sidebar of your blog.

Usually the width of outer-wrapper is 1000px and width of main-wrapper is 700px and that of sidebar-wrapper is 300px (main-wrapper + sidebar-wrapper = outer-wrapper, 700px+300px = 1000px).

In your blog, wrappers may have different names, so use your mind and guess which is your total width, post width and sidebar width.

Now if you want to introduce a new sidebar, first you have to make its place in the outer-wrapper of your blog.

There are two ways of doing it.

1. Increase the width of your total area wrapper (eg. from 1000px to 1200px)

2. Or Decrease the width of other two wrappers to make a place for new sidebar on the existing outer-wrapper. (eg. decrease the width of post wrapper from 700px to 600px and that of sidebar wrapper from 300px to 200px, Now we have a 200px space for our new sidebar)

So you can choose any of the two according to your needs.

Now after making a place for your new sidebar.

Now we will add the new sidebar.

How to add new sidebar to your blogger:

To add new side bar, go to your blogger template editor (Blogger.com > choose your blog > template > Edit Html). Look at your template html and search for /b:skin

Place following code before this tag.

#left-sidebar{margin:0 auto 0;float:left;padding:0px;width:170}

#left-sidebar h2,#footer-wrapper h2{background-color:#E6E6E6;color:#1D1D1D;padding:6px 10px;margin:0 0 10px}
#left-sidebar .widget-content{padding:0;margin:0 10px 10px}

AFter this search for this command

<div id='content-wrapper'>

Place the following code before this command

<b:section class='NewGadgetBox' id='NewGadgetBox'/>

 

Now go to layout, you will see a new side bar. Add gadget of you choice. You may float the new sidebar left or right.