Adding Second Sidebar to Beta.Blogger

Adding Second Sidebar to Beta.Blogger

Most of the beta blogs are of two columns- i.e. one main column and a sidebar. If you have ample numbers of articles you may feel trouble for space. You may seek for second sidebar or 3 columns template so that you can balance the items in the two columns. Beta blogger is more advance with some extra features. You can easily drag the items and place it as per your choice. Here I am going to show you how you can change your two columns active blog to 3-columns blog i.e. one main column with two sidebars.

Step 1: On your dash board click on layout. Then click on template. Open HTML.

Step 2: In the Beta blogger template there are 3 CSS wrapper. a. The #outer-wrapper(entire blog), b. the main-wrapper (main column) and the c. sidebar-wrapper(sidebar). You have to include a #newsidebar wrapper. Each wrapper is of different width. Keep in mind that the width of outer wrapper should greater than total width of main column and sidebar(s). Suppose the width of outer wrapper is 800px then total width of columns must be less than 800px. You may fix the width of sidebars 150px each and main –wrapper 450px that means less than the width of outer wrapper 800px{800px>450px+150px+150px)}. The width may be in percentage also. You have to adjust it similarly.

Step 3: Now set the float property. If your existing sidebar-wrapper is float:right, you have to set the newsidebar-wrapper as float:left and vic-versa for setting the sidebars in two sides. Just copy the existing sidebar and paste it under the existing sidebar and change the float property i.e. left should be changed to right and vice-versa. Adjust the width according to the guidelines stated above.
Here is the example
#outer-wrapper {

width: 800px;

...

}

#main-wrapper {

width: 450px;

...

}

#sidebar-wrapper {

width: 150px;

float: right;

...

}

#newsidebar-wrapper {

width: 150px;

float: left;

...

Step 4: Now go to div section in the body of the main template. If the existing sidebar-wrapper is under the main-wrapper, you have to set it above the main-wrapper and vice-versa. Just copy and paste and edit according to the requirement. Then Save it.
Now your two sidebar blog is ready. You may use Minima template by Douglas Bowman for easy handling. Enjoy 3-columns blog.