Three Column Minima Lefty Stretch - Two Columns on the Right

This blog is all about adding columns to free blogger templates, and this post will help you adding a third column to Minima Lefty Stretch. Note as of 11/28/09: thanks to everyone's constructive comments, I have improved these instructions. They now should be even easier to use. The two most common issues are columns dropping to the bottom of the page, or "squished columns" For the latter, carefully read my post on adjusting margins. For the former, your column width settings are wrong or you have existing widgets that are too wide for your newly narrowed columns. You'll need to reduce their width, or remove them. If you are looking for a three column tutorial for another blogger template, please look to the right under "three column mods". This tutorial will help you make a three column Minima Lefty Stretch blog with the main column on the left and two sidebars on the right. If you want a 3 column Minima Lefty Stretch blogger with the main column in the middle and one sidebar on the each side, see the main post on three column minima lefty stretch.

If you want both your sidebars on the right, this post is for you. So without further adieu, let's get started. First, open up Blogger and go into your Dashboard, then click on the "Layout" tab. Then go into the "Edit HTML" tab.

You will see a bunch of gobbledygook and gobbledygook it shall remain - you don't need to know anything about it. Just scroll down until you see the "Outer-Wrapper" section, it is marked by the following: /* Outer Wrapper. Easy enough, but an even easier way to find it is use your brower's control F (CTRL+F) command. You can just type CTRL F and then type /* Outer-Wrapper into the dialog box and click "next".

/* Outer-Wrapper
-----------------------------------------------

Now, change the width of the "main-wrapper" from 67% to 48%, and the float from $endSide to $startSide. Note that the html code "$startSide" is case sensitive:

#main-wrapper {
margin-$endSide: 2%; <-------change to $startSide
width: 67%; <-------change to 48%
float: $endSide; <-------change to $startSide
display: inline; /* fix for doubling margin in IE */
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 */

That piece of code should now look EXACTLY like this:

#main-wrapper {
margin-$startSide: 2%;
width: 48%;
float: $startSide;
display: inline; /* fix for doubling margin in IE */
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 */


Next, change the float of the "sidebar-wrapper" from $startSide to $endSide. Note that the html code "$endSide" is case sensitive:

#sidebar-wrapper {
margin-$startSide: 2%;
width: 20%;
float: $startSide;<-------change to $endSide
display: inline; /* fix for doubling margin in IE */
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 */

So far so good. Now, take this new block of code (below, in red) and paste it exactly as it appears directly in the space just before the */ Headings section. It's helpful to use "CTRL C" to copy, and then "CTRL V" to paste, if you didn't already know that trick. Regardless of how you cut and paste, you must paste the code directly in that space before the */Headings section and do not accidentally delete any code from the "#sidebar-wrapper" code above, including the "}" character at the very end. To paraphrase Monty Python, every character is sacred!

#right-sidebar-wrapper {
margin-$startSide: 2%;
width: 20%;
float: $endSide;
display: inline; /* fix for doubling margin in IE */
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 */
}

The new code block should look exactly like this:

#main-wrapper {
margin-$startSide: 2%;
width: 48%;
float: $startSide;
display: inline; /* fix for doubling margin in IE */
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 {
margin-$startSide: 2%;
width: 20%;
float:-$endSide: 2%;

display: inline; /* fix for doubling margin in IE */
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 */
}
#right-sidebar-wrapper {
margin-$startSide: 2%;
width: 20%;
float: $endSide;
display: inline; /* fix for doubling margin in IE */
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 */
}

At this point, believe it or not, there is only one more step. This particular step is hard only because you need to make sure you paste the additional code in the right spot, and this next spot can be a hard place to identify (CTRL+F helps here a lot).

Anyway, scroll down to the very end of the entire page. Several lines above the very end you will see the following:

<!-- spacer for skins that want sidebar and main to be the same height-->

Now, immediately above the line that says <!-- spacer for skins that want sidebar and main to be the same height--> and below the end of the "main-wrapper" div section (be careful not to delete any of the code in that section), paste in the following code EXACTLY as it appears below:

<div id='right-sidebar-wrapper'>
<b:section class='sidebar' id='right-sidebar' preferred='yes'>
<b:widget id='Subscribe1' locked='false' title='Subscribe' type='Subscribe'/>
</b:section>
</div>

Note: this will also insert the RSS feed widget into your new sidebar, but you can delete that and add the widget of your own choice after you finish adding the column. Update 11/28/09: If you get an error message that says the widget ID should be unique, you have an existing RSS feed widget already loaded in your original sidebar and you'll have to delete that one temporarily. But don't worry, you can customize all of your widgets when you get the columns all set up. If you don't get this message, there's no need to worry about it - the button is just a placeholder and you can replace and rearrange all of your widgets when you finish. So, after you do that, the newly modified section should now look like this:

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

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'/>
<b:section>
</div>

<div id='right-sidebar-wrapper'>
<b:section class='sidebar' id='right-sidebar' preferred='yes'>
<b:widget id='Subscribe1' locked='false' title='Subscribe' type='Subscribe'/>
</b:section>
</div>

<--spacer for skins that want sidebar and main to be the same height-->

And you are a now master Minima Lefty Stretch coder, because you're done! Hit preview to see your new 3 column Minima Lefty Stretch layout, and then save the template. Best of luck with your blogging. I hope your new 3 column Minima Lefty Stretch template helps make your blogging even more fun and enjoyable!

Best of luck with your blogging. Links to this post are always welcome. If you would like to create a quick link in one of your posts or on your blogroll but are unsure how to do it, just insert this html string in your post text:

</a href="http://www.threecolumnblogger.com/">Three Column Blogger</a>

It will appear in your post text/blogroll as Three Column Blogger

Thanks!!