Double sidebar in a sidebar

Recently I've seen many blogs have a double sidebar in a sidebar, however I cant find any of them teach how to make it, therefore I've read some source code from those blogs and developed tutorial here. Double sidebar sometimes is essential to make money online.

If you're looking for 3-column blog,go here
You may need to know how to make each widget in separate box.
You may need to know how to make each post in separate box too.

Back to the topic,double sidebar is really useful to save your space.
To do it, go to Layout >　Edit HTML

Copy your sidebar-wrapper code and multiply it by 3.

#sidebar-wrapper {
margin-top:-15px;
margin-left:615px;    /* somehow by all using margin-left will work properly */
width: 275px;
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*/
}
#sidebar-wrapper2 {
margin-left:615px;     /* somehow by all using margin-left will work properly */
width: 275px;
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*/
}
#sidebar-wrapper3 {
margin-left:615px;     /* somehow by all using margin-left will work properly */
width: 275px;
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*/
}

You may need to change your float:$endSide to margin-left in your sidebar-wrapper
Note that:margin-left normally is the sum of your main-wrapper width + main-wrapper total padding width + sidebar padding-left width.

Now you need to add the new #id of left and right sidebar,
Here's an example code:

/* -------------double sidebar --------------*/
#lsidebar{float:left; width:120px;}
#rsidebar{float:right; width:150px;}


#lsidebar .widget{padding:0 0 0 0;}
#rsidebar .widget{padding:0 0 0 0;}

body#layout #lsidebar{width:50%; padding:0px 0px; float:left; margin-left:auto; margin-right:auto}
body#layout #rsidebar{width:50%; padding:0px 0px; float:right; margin-left:auto; margin-right:auto}
}

Edit it until it suit your need.
Note that #lsidebar .widget{padding:0 0 0 0;} adjust the padding of left-sidebar widget to 0 at allside(as I declare padding in my .sidebar .widget there)
Now,search code which is similar to this(near bottom) by CTRL+F

<div id='sidebar-wrapper'>
    ......
</div> <!-- end content-wrapper -->

Paste the following code to there

<div id="sidebar-wrapper">
<b:section class="sidebar" id="sidebar" preferred="yes">
</b:section>
</div>

<div id="sidebar-wrapper2">
<b:section class="sidebar" id="lsidebar" preferred="yes">
</b:section>
<b:section class="sidebar" id="rsidebar" preferred="yes">
<b:widget id="HTML6" locked="false" title="" type="HTML">
</b:widget></b:section>
</div>
<div id="sidebar-wrapper3">

</div>

Now you should be able to see the change at your page element.
WARNING:Do not delete your widget which is in code similar to

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Now you should have professional looking sidebar.
Enjoy web design to let your customer enjoy surfing your website! Ultimately make money online.