Blogger - Denim template - sidebar on the left

When you create a new blog at blogspot.com you are presented with an initial selection of templates — but it isn't the complete list. There are more if you click on "Pick New Template" in the template area of the dashboard. In the full collection some templates have the sidebar on the left and others have it on the right. Stretch templates are fluid width and the rest are fixed width.

I'm using a modified version the regular Denim template. Although there are 4 versions, all of them have the sidebar on the right. However, it's simple to edit the template to place it on the left, as described below.

Washed Denim has a white header and Stretch Denim Light uses a paler shade of blue than the regular Denim template. The Minima template has variants with either a right sidebar or a left sidebar. You will see the following choices, among others:

Minima Minima Dark Minima Blue Minima Ochre	Denim Stretch Denim Washed Denim Stretch Denim Light
Minima Lefty Minima Stretch Minima Lefty Stretch

If you choose Minima Stretch or Minima Lefty Stretch they will have the default white color scheme. You can change the colors using the Blogger dashboard "Fonts & Colors" option. Or if Minima Blue, Ochre or Dark are what you want, you could copy the "Variable definitions" block in the Style section from the fixed width version and use it in the Stretch template. See this tutorial:
How to edit the Blogger template.

Sidebar swapping:

Save a copy of this page to your hard drive to try it out. Make the following changes inside the <style> section using a text editor (e.g. Notepad). Find these CSS declarations in the source file:

#main-wrapper {
margin-left: 14px;
width: 464px;
float: left;
... ...
}
#sidebar-wrapper {
margin-right: 14px;
width: 240px;
float: right;
... ...
}

Just swap the margins and floats from left to right, and vice versa.

#main-wrapper {
margin-right: 14px;
width: 464px;
float: right;   /* Denim template - sidebar on the left */
... ...
}
#sidebar-wrapper {
margin-left: 14px;
width: 240px;
float: left;
... ...
}

► You can do the same with other templates, although the CSS identifiers may have different names. With the Rounders template you don't even have to change the margins. Find these declarations in the source file and swap the floats:

#main {
  width:485px;
  float:left;
... ...
}
#sidebar {
  width:240px;
  float:right;
... ...
}

Hey presto!