Create 2 or more new sidebars right under sidebar

We can put anything we want to on the sidebar. And sometimes the things we want to put on it are quite small, so it wouldn’t be look good on the wide sidebar. So we need a new little sidebar. With few simple steps, we can create new sidebar, 2 or more, right under the old sidebar. The new sidebar would be unite with the old one so it would look like one multi sidebar.

To create it, login to blogspot account and go to Edit HTML menu.

Find the sidebar-wrapper code lines. Copy and paste it right under the codes. Give it a new name, such as newsidebar1.

Do the same thing for the second (or third if you want) new sidebar.

Arrange the width of new sidebars, such as a half of the width of old sidebar if we want to create 2 new sidebars right under the old one.

Arrange the float of new sidebar, right or left.

#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 */
}

#newsidebar1-wrapper {
width: 100px;
float: $startSide;
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 */
}

#newsidebar2-wrapper {
width: 100px;
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 */
}

#newsidebar3-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 */
}

After that, go to find div id='sidebar-wrapper' code lines and insert new red code lines right below </b:section> code and above </div> code like you can see below.

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>

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

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

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

</div>

Save template. Now we have new sidebars right under the old side bar.

* * * * * * * * * * *

Note: To find the code line quickly, we can use the Finder column by pressing ctrl+F and type the word we looking for in it.