How To add extra sidebar in Blogger:

Follow these steps to get extra sidebar in Blogger:

• Login to Blogger account.
• Go to Dashboard>Design>Edit HTML.
• First Back up your Template.
• Then follow the instructions given below.

I divide entire code in to section: (1) CSS (2) HTML

1. Firstly concentrate on change to CSS:

#sidebar-wrapper {
                   width: 220px;
                   float: $endSide;
                   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 */
                 }

What you will do is copy the whole code, paste it immediately after the existing code, and then rename the element to #sidebar1-wrapper, like this:

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  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 */
}


/* additional sidebar start */
#sidebar1-wrapper {
  width: 220px;
background: salmon;
  float: $endSide;
  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 */
}/* additional sidebar end */

For proper fitting, it needs to increase the width of Outer-wrapper with the same amount as the new sidebar,which is 220px.So, New Outer-wrapper width should be 220+660=880px.

#outer-wrapper {
                 width: 660px; <------ change to 880px
                 margin:0 auto;
                 padding:10px;
                 text-align:$startSide;
                 font: $bodyfont;
               }

3. Change header-wrapper width
To align header with the newly added sidebar, header-wrapper too need to be increased to 880px.

#header-wrapper {
                  width:660px; <------ change to 880px
                  margin:0 auto 10px;
                  border:1px solid $bordercolor;
                }

Now its time to change the footer width.It should be changed to 880px also.

#footer {
  width:660px;  <------ change to 880px
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

Now I are ready to change in HTML.
Look for the following code in HTML.

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>

That is the code for the existing sidebar. To copy the sidebar, do the following:
Copy the code and paste it immediately after the existing code.
Rename the div and b section id’s. The div id must be the same as the id in the CSS which is sidebar1-wrapper.
Delete the widgets in the new sidebar code.
The end result should look like this:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>


 <!-- additional sidebar start -->
<div id='sidebar1-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
</b:section>
</div>
<!-- additional sidebar end -->

Now you have both CSS and HTML coding for new sidebar.But one of the most important thing is remaining to be complete:
Position of Sidebar:
There are three possible cases are here to discuss.
1. Both sidebars on the right
If you follow above mentioned steps. You will get this arrangement by default.
2.Both sidebars on the left.

To get this arrangement, You have to do some change in CSS. Change the main-wrapper float from $startSide to $endSide and the sidebar-wrapper from $endSide to $startSide.

3. One sidebare on the left and other on the right of the post column(Main column).

In CSS, change the sidebar1-wrapper float from $endSide to $startSide.
In HTML, reposition the sidebar code from after to before the main div code,like this:

<!-- additional sidebar start -->
<div id='sidebar1-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
</b:section>
</div>
<!-- additional sidebar end -->


<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

Applying to other templates
The changes above is  for Minima template. For other templates the names of the container elements may be different.
To apply to other templates you need to identify the container elements that correspond to the elements that we changed in Minima. Follow these steps:
Look for elements that have width property (e.g. width:220px;) in CSS.
Once figured out, find the corresponding id (e.g. <div id='sidebar-wrapper'>) inside HTML section.
Note:
Most other templates don't use $startSide and $endSide variables. In that case, just replace $startSide with left and $endSide with right.