ADDING A SIDEBAR COLUMN

To consider before adding sidebar column is:

Outer-wrapper = 660px;
Header-wrapper = 660px;
Footer-wrapper = 660px;

* Now go to your blog.

* Click on the layout.

* Edit html.

* Do not give check on widged Expand templates.

Find the code like below:

/ * Outer-Wrapper
----------------------------------------------- * /
# outer-wrapper {
width: 660px;
margin: 0 auto;
padding: 10px;
text-align: $startSide;
font: $ bodyfont;
}

# main-wrapper {
width: 410px;
float:right;
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-wrapper (
width: 220px;
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 * /

This outer-wrapper is a frame in which the main wrapper, sidebar, header and footer in it.

If you want to add a sidebar you have to add also the width of the frame. For example you want to add one sedebar with the same width. Cloning and add the value of the width of the sidebar on the Outer-wrapper = 660 +220 = 880.

Give a sidebar with a different name. For example you give sidebarnew name-wrapper, so the results as follows:

/ * Outer-Wrapper
----------------------------------------------- * /
# outer-wrapper {
width: 880px;
margin: 0 auto;
padding: 10px;
text-align: $ startSide;
font: $ bodyfont;
}

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

# sidebar-wrapper {
width: 220px;
float: right;
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 * /
padding: 5px;

# sidebarnew-wrapper {
width: 220px;
float: left;
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 * /
padding: 5px

For the red color is the result of cloning sedebar-wrapper that we give the name sidebarnew-wrapper, for the blue color is extra wide so that there is distance between the font. yellow color is where lies the sidebar is.

Do not forget to also replace the width value of:
header-wrapper = 880px;
footer-wrapper = 880px;

After changing the value broadly and gave a sidebar, then drag it to the bottom of your template code. Find the code like below:

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

Put the following code immediately above it:

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

So the result as follows:

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

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

* Click the preview.

* Click save template.