Since New Blogger, and the Pick New Template wizard, was launched, many bloggers have been wishing for a 3 column template. So far, Blogger hasn't provided us with one, so a while ago, I got ambitious, and made my own. You can see the basic result, in my 3 Column Template Laboratory, and in my previous article, Making A 3 Column Template.
Today, I was asked for help with making a 3 column template, but one with 2 differences.
First, it's a Denim template, whereas my previous example used a Minima template. Second, it's a bi-directional template, a template change necessitated by support for Arabic and Hebrew, which print and read right-to-left. As it turned out, the second difference was more significant than the first.
A 2 column template has 2 columns, floating opposite each other.
All that you have to do is split the Main column.
A 2 column lefty template is just a mirror.
Again, split Main.
That's the concept. The execution is a bit tedious, but doable. But it really does work.
This is probably as easy as importing a pre coded template. Note that this example uses a Denim template, in mint condition. Most standard Blogger templates, in mint condition, should be pretty similar, though templates that stretch will need a different (and actually simpler) technique. If you've tweaked the Header code, or added main or sidebar objects, you'll deal with some variances. But you'll go through the same challenges if you import a pre designed template, and more.
First, backup the template that you have right now.
Next, go to the Edit Template wizard. Find two snippets of code.
The first, in the Header, at the top ...
And a second, in the Body, almost at the very bottom ...
And replace those two snippets of code with two slightly larger snippets. When you do this, carefully examine your current template, and what widgets you have in the Main (posts column) and Sidebar containers. Here, we have only BlogArchive1 and Profile1. If you've added any custom widgets to your main or sidebar columns (and almost everybody does, after any amount of time), be sure to copy the widget code from your current template to your new template!
The first ...
And the second ...
Save your changes.
Test.
And finally, backup the template, again!
Yes, it's that easy!
Now in this exercise, you took a standard 2 column template, and simply split the main column. What you have right now is probably a little crammed together. When you see that the 3 column layout works, you can try and widen the columns just a bit.
Today, I was asked for help with making a 3 column template, but one with 2 differences.
First, it's a Denim template, whereas my previous example used a Minima template. Second, it's a bi-directional template, a template change necessitated by support for Arabic and Hebrew, which print and read right-to-left. As it turned out, the second difference was more significant than the first.
A 2 column template has 2 columns, floating opposite each other.
- Main, floating left.
- Sidebar, floating right.
All that you have to do is split the Main column.
- Main1, floating left.
- Sidebar2, floating left.
- Main2, floating right.
- Sidebar1, floating right.
A 2 column lefty template is just a mirror.
- Sidebar, floating left.
- Main, floating right.
Again, split Main.
- Sidebar1, floating left.
- Main1, floating right.
- Main2, floating left.
- Sidebar2, floating right.
That's the concept. The execution is a bit tedious, but doable. But it really does work.
This is probably as easy as importing a pre coded template. Note that this example uses a Denim template, in mint condition. Most standard Blogger templates, in mint condition, should be pretty similar, though templates that stretch will need a different (and actually simpler) technique. If you've tweaked the Header code, or added main or sidebar objects, you'll deal with some variances. But you'll go through the same challenges if you import a pre designed template, and more.
First, backup the template that you have right now.
Next, go to the Edit Template wizard. Find two snippets of code.
The first, in the Header, at the top ...
#content-wrapper {
width: 760px;
margin: 0 auto;
padding: 0 0 15px;
text-align: $startSide;
background-color: $mainBgColor;
border: 1px solid $borderColor;
border-top: 0;
}
#main-wrapper {
margin-$startSide: 14px;
width: 464px;
float: $startSide;
background-color: $mainBgColor;
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-$endSide: 14px;
width: 240px;
float: $endSide;
background-color: $mainBgColor;
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 */
}
And a second, in the Body, almost at the very bottom ...
<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='Profile1' locked='false' title='About Me' type='Profile'/> </b:section> </div>
And replace those two snippets of code with two slightly larger snippets. When you do this, carefully examine your current template, and what widgets you have in the Main (posts column) and Sidebar containers. Here, we have only BlogArchive1 and Profile1. If you've added any custom widgets to your main or sidebar columns (and almost everybody does, after any amount of time), be sure to copy the widget code from your current template to your new template!
The first ...
#content-wrapper {
width: 760px;
margin: 0 auto;
padding: 0 0 15px;
text-align: $startSide;
background-color: $mainBgColor;
border: 1px solid $borderColor;
border-top: 0;
}
#main1-wrapper {
margin-$startSide: 2px;
width: 560px;
float: $startSide;
background-color: $mainBgColor;
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 */
}
#sidebar2-wrapper {
margin-$startSide: 2px;
width: 180px;
float: $startSide;
background-color: $mainBgColor;
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 */
}
#main2-wrapper {
margin-$endSide: 2px;
width: 360px;
float: $endSide;
background-color: $mainBgColor;
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 */
}
#sidebar1-wrapper {
margin-$endSide: 2px;
width: 180px;
float: $endSide;
background-color: $mainBgColor;
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 */
}
And the second ...
<div id='main1-wrapper'> <div id='sidebar2-wrapper'> <b:section class='sidebar' id='sidebar2' showaddelement='no'> <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/> </b:section> </div> <div id='main2-wrapper'> <b:section class='main' id='main2' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section> </div> </div> <div id='sidebar1-wrapper'> <b:section class='sidebar' id='sidebar1' preferred='yes'> <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/> </b:section> </div>
Save your changes.
Test.
And finally, backup the template, again!
Yes, it's that easy!
Now in this exercise, you took a standard 2 column template, and simply split the main column. What you have right now is probably a little crammed together. When you see that the 3 column layout works, you can try and widen the columns just a bit.
Comments