How to place a sidebar to the left and one to the right side

First please read and complete all the steps from my previous tutorial about How to add a second sidebar to blogger. I think the title of this post is explaining about what is this tutorial . We will place one of the sidebar to the other side of the blog. At the end if you will follow all steps with attention your Page Elements will look like this:

Now let`s start , we need to edit the code of the template so:

1. Go to Layout >>> Edit HTML

2. Find the following code:

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='HTML1' locked='false' title='Gadget 2' type='HTML'/>

<b:widget id='Text1' locked='false' title='Gadget 1' type='Text'/>

</b:section>

</div>

Look only for the code what i have highlighted with red , the other codelines are the gadgets inside the sidebar.

3. Find the following code:

<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>

4. Cut and Paste the code from step #2 right before the code from step #3, it will look like this just you may have other gadgets:

5. Now we need to edit the CSS code of the template:

Find the following code:

#sidebar-wrapper { width: 220px; float: $endSide; word-wrap: break-word; overflow: hidden; }

Your code may have different width so look for the code what i have marked with blue. Change the red marked code from $endSide to $startSide

6. Save your template

Related tutorials: