Creating a New Sidebar

I thought, since I've got to wait for Blogger to restore my blog, I'll post here some stuff I've learnt while trying to recover it.

Creating a new sidebar
Blogger only offers two-column templates and if you are searching for three column templates online, you will most likely be unable to change the color scheme of the template and replace blog header / description with a picture.

Here's some html that can be easily installed into your HTML area.

Under *Outer-wrapper
insert #newsidebar-wrapper after #sidebar-wrapper
Copy and paste the rest of the code accordingly. It should look something like this:

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

#main-wrapper {
width: 350px;
float: left;
margin-left: 30px;
margin-right: 40px;
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: 230px;
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 */
}

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

#main-wrapper = the column for your posts (in this blog, the middle column)
#sidebar-wrapper and #newsidebar-wrapper = your sidebars
#outer-wrapper = the columns that make up your entire blog

Change the width(s) according to what you desire. The bottom line is

Outer-wrapper width = main-wrapper width + sidebar-wrapper width + newsidebar-wrapper width + spacing between columns

If according to the above example,

850px = 350px + 230px + 170x + 100px (fit the values in with the above example accordingly)
Also, if your #sidebar-wrapper should "float: right", your #newsidebar-wrapper should "float: left" and vice versa

Scroll down to the part where you find

div id="'main-wrapper'

*insert '<' and '>' and the front and back of the line

Insert


div id='newsidebar-wrapper'
b:widget id='Profile1' locked='false' title='About Me' type='Profile'
b:section
/div

*insert '<' infront of every line and '>' at the back

If you have installed your #newsidebar-wrapper on the left to your main wrapper, make sure the above code goes above div id="'main-wrapper', followed by the #sidebar-wrapper section. If your newsidebar is on the right, just switch the places for #newsidebar-wrapper and #sidebar-wrapper

* insert '<' and '>' at the font and back of the line

I'm no HTML guru and I think I should have input everything there should be to create a new side bar. I hope it helps. I know, some of us really hate this shit.