Three Column Blogger

Three Column Minima Lefty Stretch - Two Columns on the Right

2009-06-13T19:30:00.000-07:00

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:



Now, immediately above the line that says  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:

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:

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

3 Column Rounders 4

2008-11-19T19:12:00.000-08:00

This post on 3 column blogs is for the Rounders 4 template. Someday, Blogger will make it easy and produce 3 column blogs, but until then we'll just have to modify the templates. If you haven't already, take a look at "Adding a Third Column to Blogger" to see why it's better to modify than to download a hack.

If you do choose to modify your blogger template, this tutorial will show you how to easily turn your Rounders 4 template into a 3 column blog with just a little bit of time and attention.

These instructions are simple and easy, and you can do it if you don't know the first thing about HTML (which is perfect because I don't know anything about it either). Update (11/28/09): I thought I had fixed the problems with loading custom header and footer images, but the fix is not working for everyone. Some problems may relate to non-Blogger or XML templates. For now though, if you have custom images in your header, this mod may not give you the look you want. Everything esle works perfectly though, so if anybody out there has a solution for header image issue, do share! Cheers.

These instructions are for those using Blogger's new "Layout" version. I will be adding instructions for the Rounders "Classic" template shortly. Each version of Rounders is slightly different, so if you are not using Rounders 4, look in the right sidebar for the specific version of Rounders that you are using, and click on on that link.

So let's turn your Rounders 4 template into a 3 column blog! 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 html code - but don't worry you don't need to know anything about it. Just scroll down until you see this:

/* Page Structure
-----------------------------------------------
(or, allow me to introduce your browser's control F (CTRL+F) command: you can type CTRL F, then type /* Page Structure into the dialog box and click and click next)

Now, change the width of the "outer-wrapper" from 740 to 990:

#outer-wrapper {
width:740px;<-------change to 990
margin:0 auto;
text-align:$startSide;
font: $bodyFont;
}

Next, you'll need to add 12 pixel margins to your main column, so you will make a minor change in the margin line of the "main-wrap":

#main-wrap1 {
width:485px;
float:left;
background:$mainBgColor url("http://www1.blogblog.com/rounders2/corners_main_bot.gif") no-repeat $startSide bottom;
margin:15px 0 0 ;<-------change this to "12px 0 0 12px"
padding:0 0 10px;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;
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:

#outer-wrapper {
width:990px;
margin:0 auto;
text-align:$startSide;
font: $bodyFont;
}
#main-wrap1 {
width:485px;
float:left;
background:$mainBgColor url("http://www1.blogblog.com/rounders2/corners_main_bot.gif") no-repeat $startSide bottom;
margin:12px 0 0 12px;
padding:0 0 10px;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;
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, just after the "sidebarwrap" code block in the same section, paste in the following code (you can use "CTRL C" to copy it, and then "CTRL V" to paste it):

#left-sidebar-wrap {
width:240px;
float:left;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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 h2 {
color: $postTitleColor;
border-bottom: 1px dotted $postTitleColor;
}
#newsidebarbottom h2 {
color: $postTitleColor;
border-bottom: 1px dotted $postTitleColor;
}

Now, we need to adjust the header and footer images. The reason why there are so few tutorials on three column rounders modifications is that it requires a little bit of knowledge to expand the rounders header image. This image uploads from Blogger's "blogblog" website, which means you need to not only increase the width of the image, but you also need to find someplace to host the new, expanded image. But don't worry, Three Column Blogger has done all this for you!

The first thing you need to do is locate the /* Blog Header section, it's one section below where you just pasted the new sidebar code. You will see two urls in the code, one url links to a file that helps create the top rounded part of the header image (corners_cap_top.gif), and the other url links to a file that helps create the bottom rounded portion of the header image (corners_cap_bot.gif). The code looks like this:

#header-wrapper {
background:$titleBgColor url("http://www2.blogblog.com/rounders4/corners_cap_top.gif") no-repeat $startSide top;
margin-top:22px;
margin-$endSide:0;
margin-bottom:0;
margin-$startSide:0;
padding-top:8px;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:0;
color:$titleTextColor;
}
#header {
background:url("http://www.blogblog.com/rounders4/corners_cap_bot.gif") no-repeat $startSide bottom;
padding:0 15px 8px;
}

Once you've located that code, you need to remove $titleBgcolor from the code. I have highlighted in red above so you can spot it more easily.

Next, The top header url needs to be replaced with this link:

http://i454.photobucket.com/albums/qq270/threecolumnblogger/
corners_cap4_top.gif

and the bottom header url needs to be replaced with this link:

http://i454.photobucket.com/albums/qq270/threecolumnblogger/
corners_cap4_bot.gif

So highlight and use CTRL C to copy the above links (one at a time), and then use CTRL V to paste each new link into the code block. When you do that, the new header code should look like this:

#header-wrapper {
background:$titleBgColor url("
http://i454.photobucket.com/albums/qq270/threecolumnblogger/
corners_cap4_top.gif")

no-repeat $startSide top;
margin-top:22px;
margin-$endSide:0;
margin-bottom:0;
margin-$startSide:0;
padding-top:8px;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:0;
color:$titleTextColor;
}
#header {
background:url("
http://i454.photobucket.com/albums/qq270/threecolumnblogger/
corners_cap4_bot.gif")

no-repeat $startSide bottom;
padding:0 15px 8px;
}

There is also a footer image that needs to be changed, but it's easy because the steps are the exact same as that for the header image, and it involves using the same new links. You will also need to remove $titleBgcolor from "#footer wrap2". So scroll down to the /* Footer section and replace the existing links with the new ones. When you finish, the code should look like this:

#footer-wrap1 {
clear:both;
margin:0 0 10px;
padding:15px 0 0;
}
#footer-wrap2 {
background: url("
http://i454.photobucket.com/albums/qq270/threecolumnblogger/
corners_cap4_top.gif")

no-repeat $startSide top;
color:$titleTextColor;
}
#footer {
background:url("
http://i454.photobucket.com/albums/qq270/threecolumnblogger/
corners_cap4_bot.gif")

no-repeat $startSide bottom;
padding:8px 15px;
}
#footer hr {display:none;}
#footer p {margin:0;}
#footer a {color:$titleTextColor;}
#footer .widget-content {
margin:0;
}

Then, locate the the "main wrapper" id a few lines below it. It looks like this:

Now, just above the "main wrapper" id, copy (ctrl c) and paste (ctrl v) the following code EXACTLY as it appears below:

Note: this will also insert a Blogger logo into your new left sidebar, but you can customize this however you'd like when you finish by using the Layout tab. For now, there's no need to worry about it; it's just a placeholder. So, after you do that, the newly modified section should now look like this:

And you are a now master three column Rounders 4 coder, because you're done! Hit preview to see your new three column Rounders 4 layout, and then save the template if everything looks ok. Go into the "Layout" tab and add a google gadget, or a widget, of your choice.

When you do go into the Layout tab, if you notice that the right hand column has dropped to the bottom of the "Layout" page, it means you need to make a slight adjustment to the layout "wireframe editor", which is easy to do if you made it this far.

Go back into the html tab, and scroll or CTRL F down to the section that says:

/** Page structure tweaks for layout editor wireframe */

Then, replace the code directly under the "/** Page structure tweaks for layout editor wireframe */" line with the following code block:

body#layout #header-wrapper,
body#layout #outer-wrapper,
body#layout #footer-wrap1 {
width:840px;
}
body#layout #main-wrap1 {
width: 485px;margin-right:10px;
}
body#layout #sidebar-wrap,
body#layout #left-sidebar-wrap {
width:150px;
}

The resulting code should look like this:

/** Page structure tweaks for layout editor wireframe */
body#layout #header-wrapper,
body#layout #outer-wrapper,
body#layout #footer-wrap1 {
width:840px;
}
body#layout #main-wrap1 {
width: 485px;margin-right:10px;
}
body#layout #sidebar-wrap,
body#layout #left-sidebar-wrap {
width:150px;
}
]]><b:skin>
</head>

Best of luck with your blogging. I hope this post on creating a new 3 column Rounders 4 template was helpful and that the new images were a big timesaver! **Keep in mind that these images are hosted on my free Photobucket account. It would be better for you if you download the images and host them on your own account, that way you have control over the images.** If you found this helpful, links back to this post on 3 column Rounders are always welcome. Thanks!

Three Column Minima Lefty Stretch

2008-11-18T14:23:00.000-08:00

This blog is all about adding columns to free blogger templates, and this post is all about adding a third column to Minima Lefty Stretch. If you want a tutorial for a 3 column Minima Lefty Stretch blogger layout, look no further.

These instructions are simple and easy, and you can do it if you don't know the first thing about HTML (which is perfect, because I don't). Update again: thanks for all the great comments. While it's hard to respond to each one individually, I do carefully read them all and have modified the post in order to make it (I hope) a better resource for all. Cheers!

Adding a third column to Minima Lefty Stretch is easy, and these instructions make it even easier. The Minima varietals of Blogger are some of the simplest templates out there, and they are also easy on the eyes. Consequently, there are many, many bloggers who like and use Minima.

This post is for adding a third column to Minima Lefty Stretch in "Layout Version". To check which version you're using, go into your dashboard and look just to the left of the "View Blog" link on the top left of the page. If the tab there says "Layout", you are using the Layout version of Minima and 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 52%, and the float from $endSide to $startSide. Note that the html code "$startSide" is case sensitive, to avoid the problem you can just use "left" for "$startSide" (and you can use "right" for $endSide):

#main-wrapper {
margin-$endSide: 2%; <-------change to $startSide
width: 67%; <-------change to 52%
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: 52%;
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 */

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-$endSide: 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: 52%;
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: $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 */
}
#right-sidebar-wrapper {
margin-$endSide: 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. Update: You MUST insert/paste the below new section in the right place: AFTER the main wrapper div. Your code should go sidebar wrapper first, then main wrapper, then right sidebar wrapper. If you are still having trouble, also check to make sure your floats are set correctly. The left sidebar should be set to left or $startSide, the main side bar wrapper should also be set to left or $startSide, and the right sidebar wrapper should be set to right or $endSide. 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), but you must put in the right spot.

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



Now, immediately above the line that says  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:

Note: this will also insert the RSS feed widget into your new sidebar, but you can customize that however you'd like after you finish adding the new column. Update: If you get an error message that says the widget ID should be unique, you have an RSS feed widget already loaded in your original sidebar and you'll need to delete that one temporarily. But don't worry, you can customize your columns however you like once you get them set up. If not, there's no need to worry about it. So, after you do that, the newly modified section should now look like this:

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

3 Column Rounders 2

2008-10-15T17:42:00.000-07:00

This post on 3 column blogs is for the Rounders 2 template. With this tutorial, you can easily turn your Rounders 2 blog into a 3 column blog with just a little time and attention.

These instructions are simple and easy, and you can do it if you don't know the first thing about HTML (which is perfect because I don't know anything about it either). Update: Some people have had trouble with their header images; note that your header image must be sized properly to fit within the wrapper. If you have trouble with your image, it may be too big for the wrapper. If you reduce the size, particularly the height, it should work. Thanks for all your great comments, I do read them. These instructions are for those using Blogger's new "Layout" version. I will be adding instructions for the Rounders "Classic" template shortly. Each version of Rounders is slightly different, so if you are not using Rounders 2, look in the right sidebar for the specific version of Rounders that you are using, and click on on that link.

So let's turn your Rounders 2 template into a 3 column blog! 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 html code - but don't worry you don't need to know anything about it. Just scroll down until you see this:

/* Page Structure
-----------------------------------------------
((or, allow me to introduce your browser's control F (CTRL+F) command, you just type CTRL F, then type /* Page Structure in the dialog box and click next)

Now, change the width of the "outer-wrapper" from 740 to 990:

#outer-wrapper {
width:740px;<-------change to 990
margin:0 auto;
text-align:$startSide;
font: $bodyFont;
}

Next, you'll need to add 12 pixel margins to your main column, so you will make a minor change in the margin line of the "main-wrap":

So far so good. Now, just after the "sidebarwrap" code block in the same section, paste in the following code (you can use "CTRL C" to copy it, and then "CTRL V" to paste it):

#header-wrapper {
background:$titleBgColor url("http://www2.blogblog.com/rounders2/corners_cap_top.gif") no-repeat $startSide top;
margin-top:22px;
margin-$endSide:0;
margin-bottom:0;
margin-$startSide:0;
padding-top:8px;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:0;
color:$titleTextColor;
}
#header {
background:url("http://www.blogblog.com/rounders2/corners_cap_bot.gif") no-repeat $startSide bottom;
padding:0 15px 8px;
}

The top header url needs to be replaced with this link:

http://i454.photobucket.com/albums/qq270/threecolumnblogger/
corners_cap2_top.gif

and the bottom header url needs to be replaced with this link:

http://i454.photobucket.com/albums/qq270/threecolumnblogger/
corners_cap2_bot.gif

no-repeat $startSide bottom;
padding:0 15px 8px;
}

There is also a footer image that needs to be changed, but it's easy because the steps are the exact same as that for the header image, and it involves using the same new links. So scroll down to the /* Footer section and replace the existing links with the new ones. When you finish, the code should look like this:

#footer-wrap1 {
clear:both;
margin:0 0 10px;
padding:15px 0 0;
}
#footer-wrap2 {
background:$titleBgColor url("
http://i454.photobucket.com/albums/qq270/threecolumnblogger/
corners_cap2_top.gif")

no-repeat $startSide top;
color:$titleTextColor;
}
#footer {
background:url("
http://i454.photobucket.com/albums/qq270/threecolumnblogger/
corners_cap2_bot.gif")

no-repeat $startSide bottom;
padding:8px 15px;
}
#footer hr {display:none;}
#footer p {margin:0;}
#footer a {color:$titleTextColor;}
#footer .widget-content {
margin:0;
}

Then, locate the the "main wrapper" id a few lines below it. It looks like this:

Now, just above the "main wrapper" id, copy (ctrl c) and paste (ctrl v) the following code EXACTLY as it appears below:

Note: this will also insert a Blogger logo into your new left sidebar, but you can customize this however you'd like when you finish by using the Layout tab. For now, there's no need to worry about it, it's just a placeholder. So, after you do that, the newly modified section should now look like this:

And you are a now master three column Rounders 2 coder, because you're done! Hit preview to see your new three column Rounders 2 layout, and then save the template if everything looks ok. Go into the "Layout" tab and add a google gadget, or a widget, of your choice.

When you do go into the Layout tab, if you notice that the right hand column has dropped to the bottom of the "Layout" page, it means you need to make a slight adjustment to the layout "wireframe editor", which is easy to do if you made it this far.

Go back into the html tab, and scroll or CTRL F down to the section that says:

/** Page structure tweaks for layout editor wireframe */

Then, replace the code directly under the "/** Page structure tweaks for layout editor wireframe */" line with the following code block:

body#layout #header-wrapper,
body#layout #outer-wrapper,
body#layout #footer-wrap1 {
width:840px;
}
body#layout #main-wrap1 {
width: 485px;margin-right:10px;
}
body#layout #sidebar-wrap,
body#layout #left-sidebar-wrap {
width:150px;
}

The resulting code should look like this:

/** Page structure tweaks for layout editor wireframe */
body#layout #header-wrapper,
body#layout #outer-wrapper,
body#layout #footer-wrap1 {
width:840px;
}
body#layout #main-wrap1 {
width: 485px;margin-right:10px;
}
body#layout #sidebar-wrap,
body#layout #left-sidebar-wrap {
width:150px;
}
]]></b:skin>
</head>

Best of luck with your blogging. I hope this post on creating a new 3 column Rounders 2 template was helpful and that the new images were a big timesaver! If you found this helpful, links back to this post on 3 column rounders are always welcome. Thanks!

Three Column Rounders 3

2008-09-27T00:00:00.000-07:00

The Rounders 3 templates is actually one of my favorite templates. It was the first Blogger template I ever used, and I would have kept it had I known how to add a column and turn it into a 3 column blog. There were just no 3 column instructions for this template at all. So I wrote them, and here they are.

These instructions are simple and easy, and you can do it if you don't know the first thing about HTML (which is perfect because I don't know anything about it either). Update (6/5/09): The problems with loading custom header and footer images problem have been fixed! You can now upload almost any custom image to your header, and the header box will expand to fit your image. Thanks for bringing this to my attention! This post is now a better resourse for all.

These instructions are for those using Blogger's new "Layout" version. I will be adding instructions for the Rounders "Classic" template shortly, as well as instructions for Rounders 2 and 4. Each version of Rounders is slightly different, so if you are not using Rounders 3, you should look in the right sidebar for the specific version of Rounders that you are using, and click on on that link.

So let's turn your Rounders 3 template into a 3 column blog! 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 html code - but don't worry you don't need to know anything about it. Just scroll down until you see this:

/* Page Structure
-----------------------------------------------

(Or, allow me to introduce your browser's control F (CTRL+F) command: you just type CTRL F and then type /* Page Structure into the dialog box and click next).

Now, change the width of the "outer-wrapper" from 740 to 990:

#outer-wrapper {
width:740px;<-------change to 990
margin:0 auto;
text-align:$startSide;
font: $bodyFont;
}

Next, you'll need to add 12 pixel margins to your main column, so you will make a minor change in the margin line of the "main-wrap":

#main-wrap1 {
width:485px;
float:left;
background:$mainBgColor url("http://www1.blogblog.com/rounders3/corners_main_bot.gif") no-repeat $startSide bottom;
margin:15px 0 0 ;<-------change this to "12px 0 0 12px"
padding:0 0 10px;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;
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:

#outer-wrapper {
width:990px;
margin:0 auto;
text-align:$startSide;
font: $bodyFont;
}
#main-wrap1 {
width:485px;
float:left;
background:$mainBgColor url("http://www1.blogblog.com/rounders3/corners_main_bot.gif") no-repeat $startSide bottom;
margin:12px 0 0 12px;
padding:0 0 10px;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;
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, just after the "sidebarwrap" code block in the same section, paste in the following code (you can use "CTRL C" to copy it, and then "CTRL V" to paste it):

#left-sidebar-wrap {
width:240px;
float:left;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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 h2 {
color: $postTitleColor;
border-bottom: 1px dotted $postTitleColor;
}
#newsidebarbottom h2 {
color: $postTitleColor;
border-bottom: 1px dotted $postTitleColor;
}

#header-wrapper {
background:$titleBgColor url("http://www2.blogblog.com/rounders3/corners_cap_top.gif") no-repeat $startSide top;
margin-top:22px;
margin-$endSide:0;
margin-bottom:0;
margin-$startSide:0;
padding-top:8px;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:0;
color:$titleTextColor;
}
#header {
background:url("http://www.blogblog.com/rounders3/corners_cap_bot.gif") no-repeat $startSide bottom;
padding:0 15px 8px;
}

Once you've located that code, you need to remove $titleBgcolor from the code. I have highlighted in red above so you can spot it more easily.

Next, The top header url needs to be replaced with this link:

http://i454.photobucket.com/albums/qq270/threecolumnblogger/
new_corners3_cap_top.gif

and the bottom header url needs to be replaced with this link:

http://i454.photobucket.com/albums/qq270/threecolumnblogger/
new_corners3_cap_bot.gif

So highlight and use CTRL C to copy the above links (one at a time), and then use CTRL V to paste each new link into the code block. When you do that, the new header code should look like this:

#header-wrapper {
background: url("
http://i454.photobucket.com/albums/qq270/threecolumnblogger/
new_corners3_cap_top.gif")

no-repeat $startSide bottom;
padding:0 15px 8px;
}

#footer-wrap1 {
clear:both;
margin:0 0 10px;
padding:15px 0 0;
}
#footer-wrap2 {
background: url("
http://i454.photobucket.com/albums/qq270/threecolumnblogger/
new_corners3_cap_top.gif")

no-repeat $startSide top;
color:$titleTextColor;
}
#footer {
background:url("
http://i454.photobucket.com/albums/qq270/threecolumnblogger/
new_corners3_cap_bot.gif")

no-repeat $startSide bottom;
padding:8px 15px;
}
#footer hr {display:none;}
#footer p {margin:0;}
#footer a {color:$titleTextColor;}
#footer .widget-content {
margin:0;
}

Then, locate the the "main wrapper" id a few lines below it. It looks like this:

Now, just above the "main wrapper" id, copy (ctrl c) and paste (ctrl v) the following code EXACTLY as it appears below:

Note: this will also insert a Blogger logo into your new left sidebar, but you can customize this however you'd like when you finish by using the Layout tab. (*Note: if, at the end of the tutorial, you save the template, you get a message that says "widget ID should be unique", you already have a blogger button loaded in your original sidebar and you will have to delete that one temporarily. But don't worry, you can customize all of that once you finish.) For now, there's no need to worry about it. So, after you do that, the newly modified section should now look like this:

And you are a now master three column Rounders 3 coder, because you're done! Hit preview to see your new three column Rounders 3 layout, and then save the template if everything looks ok. Go into the "Layout" tab and add a google gadget, or a widget, of your choice.

When you do go into the Layout tab, you may notice that the right hand column has dropped to the bottom of the "Layout" page. If this happens, it means you need to make a slight adjustment to the layout "wireframe editor", which is easy to do if you made it this far.

Go back into the html tab, and scroll or CTRL F down to the section that says:

/** Page structure tweaks for layout editor wireframe */

Then, replace the code directly under the "/** Page structure tweaks for layout editor wireframe */" line with the following code block:

body#layout #header-wrapper,
body#layout #outer-wrapper,
body#layout #footer-wrap1 {
width:840px;
}
body#layout #main-wrap1 {
width: 485px;margin-right:10px;
}
body#layout #sidebar-wrap,
body#layout #left-sidebar-wrap {
width:150px;
}

The resulting code should look like this:

/** Page structure tweaks for layout editor wireframe */
body#layout #header-wrapper,
body#layout #outer-wrapper,
body#layout #footer-wrap1 {
width:840px;
}
body#layout #main-wrap1 {
width: 485px;margin-right:10px;
}
body#layout #sidebar-wrap,
body#layout #left-sidebar-wrap {
width:150px;
}
]]><b:skin>
</head>

Best of luck with your blogging. I hope this post on creating a new three column Rounders 3 template was helpful and that the new images were a big timesaver! If you found this helpful, links back to this post on three column rounders are always welcome. Please also note that these header images are hosted on photobucket. Feel free to use them, but it would be safer for you to download them and host them on your own account - that way you have control over the images. Thanks!

3 Column Rounders

2008-09-13T12:06:00.000-07:00

My first search for three column blogs was inspired by the Rounders template. I loved the Rounders layout, and I wanted a three column version. However, I looked all over the web and was unable to come up with any instructions for making a three column Rounders template. So, I switched over to Minima and learned all about pixels and margins. You, however, do not have to switch, because these instructions for adding a column to your Rounders template will have you up and running with a three column Rounders blog in no time at all.

These instructions are simple and easy, and you can do it if you don't know the first thing about HTML (which is perfect because I don't know anything about it either). Update (6/5/09): The problems with loading custom header and footer images problem have been fixed! You can now upload almost any custom image, and the header box will expand to fit your image. Thanks for bringing this to my attention! This post is now a better resource for all.

These instructions are for those using Blogger's new "Layout" version. I will add instructions for the Rounders "Classic" template shortly, as well as instructions for Rounders 2 and Rounders 4. Each version of Rounders is slightly different, so if you are not using "Rounders", you should look in the right sidebar for the specific version of Rounders that you are using, and click on on that link.

So let's get started adding a column to your Rounders template. 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 html code - but don't worry you don't need to know anything about it. Just scroll down until you see this:

/* Page Structure
-----------------------------------------------
(Or, allow me to introduce your browser's control F (CTRL+F) command, you just type CTRL F and then type in /* Page Structure in the dialog box and click next)

Now, change the width of the "outer-wrapper" from 740 to 990:

#outer-wrapper {
width:740px;<-------change to 990
margin:0 auto;
text-align:$startSide;
font: $bodyFont;
}

Next, you'll need to add 12 pixel margins to your main column, so you will make a minor change in the margin line of the "main-wrap":

#main-wrap1 {
width:485px;
float:left;
background:$mainBgColor url("http://www1.blogblog.com/rounders/corners_main_bot.gif") no-repeat $startSide bottom;
margin:15px 0 0 ;<-------change this to "12px 0 0 12px"
padding:0 0 10px;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;
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:

#outer-wrapper {
width:990px;
margin:0 auto;
text-align:$startSide;
font: $bodyFont;
}
#main-wrap1 {
width:485px;
float:left;
background:$mainBgColor url("http://www1.blogblog.com/rounders/corners_main_bot.gif") no-repeat $startSide bottom;
margin:12px 0 0 12px;
padding:0 0 10px;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;
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, just after the "sidebarwrap" code block in the same section, paste in the following code (you can use "CTRL C" to copy it, and then "CTRL V" to paste it):

#header-wrapper {
background:$titleBgColor url("http://www2.blogblog.com/rounders/corners_cap_top.gif") no-repeat $startSide top;
margin-top:22px;
margin-$endSide:0;
margin-bottom:0;
margin-$startSide:0;
padding-top:8px;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:0;
color:$titleTextColor;
}
#header {
background:url("http://www.blogblog.com/rounders/corners_cap_bot.gif") no-repeat $startSide bottom;
padding:0 15px 8px;
}

Once you've located that code, you need to remove $titleBgcolor from the code. I have highlighted in red above so you can spot it more easily.

Next, the top header url needs to be replaced with this link:

http://i454.photobucket.com/albums/qq270/threecolumnblogger/
corners_cap_top.gif

And the bottom header url needs to be replaced with this link:

http://i454.photobucket.com/albums/qq270/threecolumnblogger/
corners_cap_bot.gif

Note, there should be NO break in the above code, it should be all one line with no spaces - I broke it up only for purposes of this tutorial (thanks Crispy!). So highlight and use CTRL C to copy the above links (one at a time), and then use CTRL V to paste each new link into the code block. When you do that, the new header code should look like this:

#header-wrapper {
background: url ("http://i454.photobucket.com/albums/qq270/threecolumnblogger/
corners_cap_top.gif") no-repeat $startSide top;
margin-top:22px;
margin-$endSide:0;
margin-bottom:0;
margin-$startSide:0;
padding-top:8px;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:0;
color:$titleTextColor;
}
#header {
background:url("http://i454.photobucket.com/albums/qq270/threecolumnblogger/
corners_cap_bot.gif") no-repeat $startSide bottom;
padding:0 15px 8px;
}

#footer-wrap1 {
clear:both;
margin:0 0 10px;
padding:15px 0 0;
}
#footer-wrap2 {
background: url("http://i454.photobucket.com/albums/qq270/threecolumnblogger/
corners_cap_top.gif") no-repeat $startSide top;
color:$titleTextColor;
}
#footer {
background:url("http://i454.photobucket.com/albums/qq270/threecolumnblogger/
corners_cap_bot.gif") no-repeat $startSide bottom;
padding:8px 15px;
}
#footer hr {display:none;}
#footer p {margin:0;}
#footer a {color:$titleTextColor;}
#footer .widget-content {
margin:0;
}

Then, locate the the "main wrapper" id a few lines below it. It looks like this:

Now, just above the "main wrapper" id, copy (ctrl c) and paste (ctrl v) the following code EXACTLY as it appears below:

Note: this will also insert a Blogger logo into your new left sidebar, but you can customize this however you'd like when you finish by using the Layout tab. *Note, if at the end of the tutorial when you save the template, you get a message that says "widget ID should be unique", you already have a Blogger logo loaded, and you will have to delete the original one. But don't worry, you can customize all of it when you're finished. when you If you get a message that For now, there's no need to worry about it, it's just a placeholder. So, after you do that, the newly modified section should now look like this:

And you are a now master three column Rounders coder, because you're done! Hit preview to see your new three column Blogger layout, and then save the template if everything looks ok. Go into the "Layout" tab and add a google gadget, or a widget, of your choice.

If you do go into the Layout tab and notice that the right hand column has dropped to the bottom of the "Layout" page, it means you need to make a slight adjustment to the layout "wireframe editor", which is easy to do if you made it this far.

Go back into the html tab, and scroll or CTRL F down to the section that says:

/** Page structure tweaks for layout editor wireframe */

Then, replace the code directly under the "/** Page structure tweaks for layout editor wireframe */" line with the following code block:

body#layout #header-wrapper,
body#layout #outer-wrapper,
body#layout #footer-wrap1 {
width:840px;
}
body#layout #main-wrap1 {
width: 485px;margin-right:10px;
}
body#layout #sidebar-wrap,
body#layout #left-sidebar-wrap {
width:150px;
}

The resulting code should look like this:

/** Page structure tweaks for layout editor wireframe */
body#layout #header-wrapper,
body#layout #outer-wrapper,
body#layout #footer-wrap1 {
width:840px;
}
body#layout #main-wrap1 {
width: 485px;margin-right:10px;
}
body#layout #sidebar-wrap,
body#layout #left-sidebar-wrap {
width:150px;
}
]]></b:skin>
</head>

Best of luck with your blogging. I hope this post on creating a new three column Rounders template was helpful and that the new images were a big timesaver! If you found this helpful, links back to this post on three column rounders are always welcome. Please also note that these custom header images are hosted on photobucket - it would be safer for you to download them and host them on your own account - that way you have control over the images. Thanks!

Adjusting Margins For Three Column Denim Templates

2008-09-09T12:10:00.000-07:00

In the earlier related post, we showed you how to make a three column Denim layout. In this post, we will show you how to adjust margins and columns widths in your new three column Denim template.

One of the first things you may notice about your new three column Denim blog is that there is no margin on the left-hand side of the left sidebar. This is easy to fix, and we posted these instructions separately so you could gain confidence in adjusting margins and also column widths. This way, you can completely customize the look of your new three column layout to almost any desire completely on your own.

First, however, a word about pixels and screen width. In our three column tutorial, you widened the width of the main page from 720 pixels to 940 pixels. This was to make room for the third column. 940 is a safe width which will allow almost all users to easily view your blog pages on existing monitors (on another blog of mine, fewer than 5% of viewers use the old 800x600 screen resolution). We also used side-bar widths of 192 and a main column width of 500. In addition, there are also (4) 14px margins built in to the template, and in the three column tutorial we left those the way they were.

In this tutorial, we are going to move those margins around a little, and also explain how column widths and margins can be customized to your liking.

First, about that left-hand column margin: we should to fix it. Right now, your left sidebar code should look like this:

#left-sidebar-wrapper {
margin-$endSide: 14px;
width: 192px;
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 */
}

The second line shows the margin settings, which call for 14 pixels on the "end side" or right hand side of the left sidebar. Since the margin settings on the main column already have 14 pixels on the left hand side, this means we now have a 28 pixel margin between the left sidebar and the main column. These doubled up margins are what makes the columns look unbalanced. Consequently, we should change the sidebar margin so that the 14 pixels are on the left-hand side, or start side, of the sidebar instead of the right side. That's easy. Just change "$endside" to "$startside", like this (remember to edit carefully; there is an "s" in $startside):

#left-sidebar-wrapper {
margin-$endSide: 14px;<-------change $endSide to $startside
width: 192px;
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 */
}

Hit preview, and if everything looks good, save the changes and republish. You should now have equal 14 pixel margins on the left and right hand edges of your blog, and equal 14 pixel margins in between the main column and the left and right sidebars. Everything is now balanced.

If you want to changes the widths of your columns, that's easy too, but you must keep in mind that the the column widths plus all the margins must all add up to your main page width. Right now, your main page width is 940 pixels, into which you fit one main column that is 500 pixels wide, two sidebars that are 192 pixels wide each, and fours margins that are collectively 56 pixels wide (4x14). Not coincidentally, the three columns and all the margins also add up to 940 (500+192+192+56=940).

Accordingly, you must maintain this relationship if you adjust your column widths. For example, if you want to increase the width of your two sidebars by 8 pixels each, you'll need to increase the width of your main page by 16 (2x8) pixels, such that the new main page width is 956. Conversely, you could also reduce all the margins by 4 pixels each, such that they are all 10 pixels apiece instead of 14, and the overall page width can remain at 940 pixels.

The possibilities for customization are almost endless, so long as all your columns and margins do not exceed the main page width. If they do, the right hand column will usually drop down to the bottom of the page. If you decide to increase your main page width to accommodate larger columns, be careful not to increase it too much. Anything larger than 1028 pixels will cause trouble for viewers with older monitors (which have smaller screen resolutions). They will have to scroll left and right, back and forth, to read the content of your blog, and that will reduce readability.

I hope this tutorial on adjusting your three column Denim margins was helpful. Most of all, I hope you enjoy your slick new three column Denim layout!

Three Column Denim

2008-09-08T11:08:00.000-07:00

These instructions for adding a third column to Denim will have you up and running with a three column Denim template in no time at all. Adding a third column to Denim is pretty straightforward, especially if you follow these easy instructions. Denim is a popular Blogger template, and it's also pretty easy to convert into a three column layout.

These instructions are simple and easy, and you can do it if you don't know the first thing about HTML.

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 (or, allow me to introduce your browser's control F (CTRL+F) command, you can just type in /* Header and click next) until you see this:

/* Header
-----------------------------------------------

Now, change the width of the "header" from 760 to 940:

#header {
width:760px; <-------change to 940
margin: 0 auto;
background-color: $headerBgColor;
border: 1px solid $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
}

That piece of code should now look EXACTLY like this:

#header {
width:940px;
margin: 0 auto;
background-color: $headerBgColor;
border: 1px solid $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
}

So far so good. Next, scroll down (or use CTRL+F) to where it says:

/* Content
----------------------------------------------- */

Now, just like you did in the "header" above, change the "content-wrapper" width from 760 to 940, (2) change the "main-wrapper" width from 464 to 500, and (3) change the width of the "sidebar-wrapper" from 240 to 192:

#content-wrapper {
width: 760px; <-------change to 940
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; <-------change to 500
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; <-------change to 192
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 */
}

Next, take this new block of code (in red) and paste it in exactly as it appears directly in between the "content-wrapper" code and "main-wrapper" code. 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 do it, you must paste it in between these two code blocks, nowhere else.

#left-sidebar-wrapper {
margin-$endSide: 14px;
width: 192px;
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 */
}

The new code block should look exactly like this:

#content-wrapper {
margin-$endSide: 14px;
width: 940px;
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 */
}

#left-sidebar-wrapper {
margin-$endSide: 14px;
width: 192px;
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 */
}

#main-wrapper {
margin-$startSide: 14px;
width: 500px;
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: 192px;
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 */
}

Then, locate the the "main wrapper" id a few lines below it. It looks like this:

Now, just above the "main wrapper" id, paste in the following code EXACTLY as it appears:

Note: this will also insert the RSS feed widget into your sidebar, but you can customize that however you'd like when you finish using the Layout tab. For now, there's no need to worry about it. So, after you do that, the newly modified section should now look like this:

And you are a now master Denim coder, because you're done! Hit preview to see your new three column blogger layout, and then save the template. Go into layouts and add a google gadget, or a widget, of your choice. If you'd like to adjust your margins, go to Adjusting Margins For Three Column Denim.

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

Three Column Minima Ochre

2008-09-08T08:57:00.000-07:00

I looked all over the web for clear instructions on how to add a column to my blog and nearly went blind in the process. I absolutely thrilled the pharmacist with my headache and assured my stupified optometrist that I would upgrade to a new monitor. With these instucttions for adding a third column to your Minima Ochre template, you will have neither issue.

To be sure, the web is not completely devoid of instructions for adding columns. Bu many are "one-size-fits-all" instructions that were confusing to a newbie like me, and I found none that dealt specifically with Blogger's "Template" version. Nevertheless, if you are publishing via FTP to a "dot com" domain, like me and thousands of others, Template is the version you must use. So, for those of you who want to add a third colum to blogger templates published via FTP to your own domain, this site will be particularly useful.

Adding a third column to Minima Ochre is actually pretty easy, and these instructions make it even easier. Minima Ochre is one of the simplest templates out there, and it's also easy on the eyes, so readers like it.

The first thing you need to do is to determine whether you're using Blgger's "Template" version or Blogger's "Layout" version. To check, go into your dashboard and look just to the left of the "View Blog" link on the top left of the page. If the tab there says "Layout", you are using the Layout version of Minima Ochre, and the instructions for adding a third column to Layout are here.

If it says "Template" there instead, then you are using the "Classic" Template version of Minima Ochre and those instructions are a bit different. But don't worry, I've posted instructions for three column Minima Dark in Classic Template version here.

Once you finish adding your columns to Minima Ochre, you should also check out the instructions for adjusting your margins. I have also included a link to the post on adjusting your margins in the instructions for adding a column to Minima Dark in both the Layout and Classic Template versions.

Best of luck with your blogging. I hope your new three column Minima Ochre template helps make your blogging even more fun and enjoyable!

Three Column Minima Dark

2008-09-03T16:59:00.000-07:00

I'm glad you found my blog on adding columns to your blogger template. I looked all over the web for clear instructions on how to turn my two column blog into a three column blog. I did manage find some worthwhile sites, but not all were entirely applicable, and I found none that dealt specifically with Blogger's "Classic Template" version. If you are publishing via FTP to a "dot com" domain, like thousands of others, Template is the version you must use. So, for those of you who want a three column blog published via FTP to your own domain, this site will be particularly useful.

Adding a third column to Minima Dark is actually pretty easy, and these instructions make it even easier. Minima Dark is one of the simplest templates out there, and it's also easy on the eyes, so readers like it.

The first thing you need to do is to determine whether you're using Blgger's "Template" version or Blogger's "Layout" version. To check, go into your dashboard and look just to the left of the "View Blog" link on the top left of the page. If the tab there says "Layout", you are using the Layout version of Minima Dark, and the instructions for adding a third column to Layout are here.

If it says "Template" there instead, then you are using the "Classic" Template version of Minima and those instructions are a bit different. But don't worry, I've posted instructions for three column Minima Dark in Classic Template version here.

Once you finish adding your columns to Minima Dark, you should also check out the instructions for adjusting your margins. I have also included direct a link to that post in the instructions for adding a column in the Layout and Classic Template versions of Minima Dark.

Best of luck with your blogging. I hope your new three column minima dark template makes your blogging even more fun and enjoyable!

Three Column Minima (Layout Version)

2008-09-03T05:05:00.000-07:00

I started this blog because, like everyone who gets into blogging, I wanted to add a third column to my Minima template. Sadly, I also knew absolutely nothing about HTML, and nowhere could I find instructions that were all in one place and easy to understand. Three Column Blogger was then born. Update 1/2/10: Thank you all so much for your great comments, encouragement and suggestions. There are now over 300 comments, and Blogger has appended them - you'll need to click on the "more comments" link at the bottom of the page to post a comment or read new replies. I still read all of the comments, and I try to incorporate your suggestions into the main post. This has become a better resource for all as a result. As always, links are appreciated. Cheers!

These instructions are simple and easy, and you can do it if you don't know the first thing about HTML (which is perfect, because I don't). Minima is one of the simplest templates to modify, and it's also easy on the eyes, so both readers and bloggers like it.

This post is for adding a third column to Minima in "Layout Version". To check which version you're using, go into your dashboard and look just to the left of the "View Blog" link on the top left of the page. If the tab there says "Layout", you are using the Layout version of Minima and this post is for you. If it says "Template" there instead, then you are using the "Classic" Template version of Minima and those instructions are a bit different. But don't worry, I've posted instructions for three column Minima in Classic Template version here.

So 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 through the code until you see :

/* Header
-----------------------------------------------
(Note: you can also use your browser's control F (CTRL+F) command to search for this section. Just type in /* Header and then click the "next" button)

Now, change the width of the "header-wrapper" from 660 to 940;

#header-wrapper {
width:660px; <-------change to 940
margin:0 auto 10px;
>border:1px solid $bordercolor;
}

That piece of code should now look EXACTLY like this:

#header-wrapper {
width:940px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Also, at the bottom of the same Header section, change the max-width from 660 to 940:

#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee;
border-width:0 1px 1px;
max-width:660px;<-------change to 940
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}

That piece of code should now look like this:

#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee;
border-width:0 1px 1px;
max-width:940px;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}

So far so good. Next, scroll down (or use CTRL+F) to where it says:

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

Now, just like you did in the Header above, change the "outer-wrapper" width from 660 to 940, and (2) change the "main-wrapper" width from 410 to 500

#outer-wrapper {
width: 660px; <-------change to 940
margin:0 auto; padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px; <-------change to 500
float: $startSide;
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, take this new block of code (in red) and paste it in exactly as it appears directly in between the "outer-wrapper" code and "main-wrapper" code. 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 do it, you must paste it in between these two code blocks, nowhere else. Update: the Google Gremlins may let some of you get away with using "left" instead of "$startSide" and "right" instead of "$endSide".

#left-sidebar-wrapper {
width: 220px;
float: $startSide;
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:

#outer-wrapper {
width: 940px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#left-sidebar-wrapper {
width: 220px;
float: $startSide;
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 {
width: 500px;
float: $startSide;
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: 220px;
float: $endSide;
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 */
}

Then scroll way down the page to the footer section (or use CTRL F), it looks like this:

/* Footer
----------------------------------------------- */

Change the width of the "footer" from 660 to 940.

#footer {
width:660px; <-------change to 940
clear:both;
margin:0 auto; 10px
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

At this point, believe it or not, there are only two more steps. 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, in the same footer section that you're now in, scroll down until you see:

Then, locate the the "main wrapper" id a few lines below it. It looks like this:

Now, just above the "main wrapper" id, paste in the following code EXACTLY as it appears below:

Note: this will also temporarily insert the Blogger logo button into your new sidebar, but you can delete that and add the widget of your own choice after you finish adding the column. Update: If you get an error message that says the widget ID should be unique, you have an existing blogger button 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 sidebars when you get them all set up. If not, 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:

And you are a now master Minima coder, because you're done! Hit preview to see your new three column Minima layout, and then save the template. Now you can go into the "Layouts" and add a new google gadget of your choice. You can also read this article for instructions on how to adjust your margins to make more space in between your columns.

If you have any trouble with your "nav bar" or would simply like to turn it off, insert the following code (in red) exactly where I have placed it:

Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------
#navbar-iframe {
display: none !important;
}

Best of luck with your blogging. If this post was helpful, I would really appreciate a link. If you would like to create a 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!!

Adjusting Margins for Three Column Minima in Classic Template

2008-09-02T20:27:00.000-07:00

In the earlier related post, we showed you how to turn your free two column Minima Blogger template into a three column Minima template. After you get your three columns all set up, you'll probably also want to adjust your margins. Your blog will be fine without this step, but you'll probably notice that your columns appear a little "squished". Have no fear, it's easy to fix, and once you learn how you can customize your blog's look, including column widths, to almost any desire.

This post is for adjusting margins in "Classic Template" version. Update 6/18/09: this post has been updated and corrected, thanks to comments from "Z", "Steve and Susan" and "34 Something". These instructions are now consistent with the post on adding a third column to Minima in Classic Version, so you should have no problem correlating those instructions with these instructions. Sorry for the confusion!

If you forgot which version you're using, just go into your dashboard and look to the left of the "View Blog" link. If the tab there says "Template", you are using classic version of Blogger and this post is for you. If it says "Layout" there instead, then you are using the "Layout" Template and those instructions are here.

Like the instructions for adding columns, these instructions are also simple and easy, and you can do it if you don't know the first thing about HTML.

In the Three Column Blogger tutorial on adding a column to Minima in Classic Template, you made room for the new column by increasing the width of the page to 940 pixels.

Consequently, when you adjust your margins, the width of the sidebars, the main post column and all the margins must collectively add up to 940. If they exceed 940, one of your columns will drop to the bottom of the page. If they are less than 940, you will still see all three columns but the layout may be asymmetrical. So get out your calculator and let's begin!

First, open up Blogger and go into your Dashboard, then click on the "Layout" tab. Then go into the "Edit HTML" tab. Next, scroll down (or use CTRL+F) to where it says:

/* Content
----------------------------------------------- */

Now, you are going to paste some code in to add margins to your new columns. It's helpful here to remember the "ctrl c" trick to copy and "ctrl v" to paste - much faster and easier. The code you are going to paste in will be the exact same every time. It is:

margin right:
margin left:

First, we will add margins to the "left-sidebar-wrapper". To do that, paste the following code in between the sidebar's "width" and "float" designations:

margin-right: 15px;
margin-left: 5px;

Next, we will move to the "#main" section. Paste the following code in between the main-content's "width" and "float" designations:

margin-right: 10px;
margin-left: 10px;

Then, we'll do the same thing for the "#sidebar" section, which is identified in the code as the "sidebar-wrapper". Paste the following code in between the right sidebar's "width" and "float" designations:

margin-right: 5px;
margin-left: 15px;

Now for the math. These margins added 60 pixels to the main page, and there are 20 pixels of "buffer" padding on the outer page border, so we'll need to reduce the width of the columns by a collective 80 pixels. In this example, I have chosen to reduce the width of all three columns, but you can also reduce the main post width alone, or just the two sidebars (as long as it all adds up to 80). This is what you need to do in order to reduce all the column widths:

#left-sidebar {
width: 220px;<-------change to 200
margin-right: 15px;
margin-left: 5px;
float:left;
}
#main {
width:500px;<-------change to 460
margin-right: 10px;
margin-left: 10px;
float:left;
}
#sidebar {
width:220px;<-------change to 200
margin-right: 5px;
margin-left: 15px;
float:right;
}

Your finished block of code with the new margins should now look like this:

#left-sidebar-wrapper {
width: 200px;
margin-right: 15px;
margin-left: 5px;
float: left;
}
#main {
width: 460px;
margin-right: 10px;
margin-left: 10px;
float: left;
}
#sidebar {
width: 200px;
margin-right: 5px;
margin-left: 10px;
float: right;
}

Hit "preview" to see your new three column blogger layout with the new margins, and then save the template if everything is ok. And now you really are a now master minima coder! Not only are you completely done, but you are also armed with enough knowledge to increase the width of your columns and main page in order to fit custom widgets and other "non-google" add-ins.

Best of luck with your blogging. I hope this article on adding margins to your three column template was helpful!

Adjusting Three Column Margins in Layout

2008-09-01T18:52:00.000-07:00

In the earlier related post, your faithful servant showed you how to turn your free two column Minima Blogger template into a three column Minima template. After you get your three columns all set up, you'll probably want to adjust your margins. Your blog will be fine without this step, but you'll probably notice that your columns appear "squished" in together. Have no fear, it's easy to fix, and once you learn how you can customize your blog's look to almost any desire.

This post is for adjusting margins in "Layout Version". If you forgot which version you're using, just go into your dashboard and look to the left of the "View Blog" link. If the tab there says "Layout", you are using the Layout version of Minima and this post is for you. If it says "Template" there instead, then you are using the "Classic" Template version of Minima and those instructions are here.

Like the instructions for adding columns, these instructions are also simple and easy, and you can do it if you don't know the first thing about HTML.

In the Three Column Blogs tutorial on adding a column to Minima in Layout, you made room for the new column by increasing the width of the page to 940 pixels.

Consequently, when you adjust your margins, the width of the sidebars, the main post column and all the margins must collectively add up to 940. If they exceed 940, one of your columns will drop to the bottom of the page. If they are less than 940, you will still see all three columns but the layout will be asymmetrical. So get out your calculator and let's begin!

First, open up Blogger and go into your Dashboard, then click on the "Layout" tab. Then go into the "Edit HTML" tab. Next, scroll down (or use CTRL+F) to where it says:

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

Now, you are going to paste some code in to add margins to your new columns. It's helpful here to remember the "ctrl c" trick to copy and "ctrl v" to paste - it's much faster and easier. The code you are going to paste in will be the exact same every time. It is:

margin right:
margin left:

First, we will add margins to the "left-sidebar-wrapper". To do that, paste the following code in between the sidebar's "width" and "float" designations:

margin-right: 10px;
margin-left: 5px;

Next, we will move to the "main-wrapper". Paste the following code in between the main-content's "width" and "float" designations:

margin-right: 15px;
margin-left: 15px;

Then, we'll do the same thing for the right sidebar wrapper, which is identified in the code as the "sidebar-wrapper". Paste the following code in between the right sidebar's "width" and "float" designations:

margin-right: 5px;
margin-left: 10px;

Now for the math. These margins added 70 pixels to the main page, so we'll need to reduce the width of the columns by a collective 70 pixels. In this example, I have chosen to reduce the width of the two sidebars, but you can also reduce the main post width alone, or all columns together. This is what you need to do in order to reduce the sidebar widths:

#left-sidebar-wrapper {
width: 220px;<-------change to 185
margin-right: 10px;
margin-left: 5px;
float: $startSide;
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: 220px;<-------change to 185
margin-right: 5px;
margin-left: 10px;
float: $endSide;
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 */
}

Your finished block of code with the new margins should now look like this:

#left-sidebar-wrapper {
width: 185px;
margin-right: 10px;
margin-left: 5px;
float: $startSide;
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 {
width: 500px;
margin-right: 15px;
margin-left: 15px;
float: $startSide;
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: 185px;
margin-right: 5px;
margin-left: 10px;
float: $endSide;
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 */
}

Hit "preview" to see your new three column blogger layout with margins, and then save the template if everything is ok. And now you really are a now master minima coder! Not only are you completely done, but you are also armed with enough knowledge to increase the width of your columns and main page in order to fit custom widgets and other "non-google" add-ins.

Update: There are a lot of comments below about not enough space between columns, too much space, etc. These are personal preferences and they can easily be met - the great thing about the Blogger templates is that you can customize them to your heart's desire. Experiment! Just fiddle with the margin settings until your blog looks the way you want - it's easy. More pixels in your margins=more space between columns, less pixels in your margins=less space. Be careful not to add too much though, or your right column will drop to the bottom of the page.

Also, several people made comments about images/widgets/photos getting cut off in their sidebars - again, you need to either reduce the size of the image/widget/photo to fit in your sidebar, or increase the width of the sidebar to accommodate the size of the widget. But be careful: if you make it too wide,your right column will drop to the bottom of the page.

Best of luck with your blogging. I hope this article on adding margins to your three column template did great things for your blog! If this post was helpful, please link to it! Cheers.

Three Column Minima (Classic Template Version)

2008-09-01T16:46:00.000-07:00

My first experience in attempting to add a third column to Minima was incredibly frustrating. Not only could I not find instructions on three column Minima that were all in one place and easy to understand, but none of the examples I found were for Minima in the Classic Template version.

These instructions are for adding a third column to Minima in "Classic" Template version. To check which version you're using, go into your dashboard and look just to the left of the "View Blog" link on the top left of the page. If it says "Template" in the next tab to the left, then you are using the "Classic" Template version and this is the post for you. If it says "Layout" there instead, then click on over to Three Column Minima (Layout). You would definitely be using Classic Template if you are publishing via FTP to your own dot come domain on a third party host (Blogger doesn't support Layout on non-blogspot domains).

Making a three column blog is easy in either version of Minima, but it's a little different for each. If you're like me and completely frustrated by the lack of directions for the Template version of Minima, you've come to the right place. This post and about 10 minutes are all that separate you and your blog from three column nirvana!

These instructions are simple and easy, and you can do it even if you don't know the first thing about HTML (because I didn't when I started this, and I know what it's like).

First, open up Blogger, go into your Dashboard and click on the "Tempate" 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 (or, allow me to introduce your browser's control F (CTRL+F) command, you can just type in /* Header and click next) until you see this:

/* Header
-----------------------------------------------

Now, change the width of the header width from 660 to 940:

@media all {
#header {
width:660px; <-------change to 940
margin:0 auto 10px;
>border:1px solid $bordercolor;
}

That piece of code should now look EXACTLY like this:

@media all {
#header {
width:940px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Also, at the bottom of the same Header section, change the max-width from 660 to 940:

#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee;
border-width:0 1px 1px;
max-width:660px;<-------change to 940
font:85%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#FFFFFF;
}

That piece of code should now look like this:

#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee;
border-width:0 1px 1px;
max-width:940px;
font:85%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#FFFFFF;
}

So far so good. Next, scroll down to the content section (or use CTRL+F), the beginning of the content section looks like this:

/* Content
----------------------------------------------- */

Now, just like you did in the Header above, change the "content" width from 660 to 940, and (2) change the "main" width from 410 to 500:

@media all {
#content{
width: 660px; <-------change to 940
margin:0 auto;
padding:0px;
text-align:left;
}

#main {
width: 410px; <-------change to 500
float:left;
}

Next, take this new block of code (in red, below) and paste it in exactly as it appears directly in between the #content code block and the #main code block. 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 do it, you must paste it in between these two code blocks, nowhere else.

#left-sidebar {
width: 220px;
float: left;
}

The new code block should look like this:

@media all {
#content{
width: 940px;
margin:0 auto;
padding:0px;
text-align:left;
}
#left-sidebar {
width: 220px;
float: left;
}
#main {
width: 500px;
margin:0 auto;
padding:0; text-align:left;
}
#sidebar {
width:220px;
float:right;
}
}
@media handheld {
#content {
width:90%;
}
#main {
width:100%;
float:none;
}
#sidebar {
width:100%;
float:none;
}
}

Then scroll way down the page to the footer section (or use CTRL F), the beginning of the footer section looks like this:

/* Footer
----------------------------------------------- */

Now, change the width of the footer from 660 to 940:

#footer {
width:660px; <-------change to 940
clear:both;
margin:0 auto;
}

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 type in 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, in the same footer section that you're now in, scroll down until you see the beginning of the "content" section, it looks like this:


<div id='content'>

Then, locate the the "main" section id a few lines below it. It looks like this:


<div id='main'><div id='main 2'>

Now, just above the "main" and "main2" id, paste in the following code EXACTLY as it appears (note, this code will insert text into your new sidebar as a placeholder, you can customize that later when you finish):

<div id="left-sidebar">
<h2 class="sidebar-title">New Text Titles</h2>
</div>

After you do that, the newly modified section should now look like this:

<div id='content'>

<div id="left-sidebar">
<h2 class="sidebar-title">New Text Titles</h2>
</div>


<div id="main"><div id="main2">

If it does, you are a now master minima coder, because you're done! Hit preview to see your new three column layout, and then save the template. Then you can go into the "Html Edit" tab and replace the "New Text Titles" placeholder with new text, a widget, or advertising. Just be sure to keep it all within the opening left-sidebar "div id" tag and the closing "</div>" tag.

At this point, you may also want to look at adjusting your column margins in Classic Template. That post will help you get more space in between the columns and achieve an even more custom look.

Best of luck with your blogging. If you found this helpful, links back to this post on three column minima are always welcome. Thanks!

Adding A Third Column To Blogger

2008-09-01T15:05:00.000-07:00

If you're interested in adding a third column to your free blogger template, search no more. Our blogger tutorials will teach you everything you need to turn your two column blog into a three column blog.

Not only will we show you how to quickly and easily add a third column, but we will show you how to position your new column too. Do you want a new sidebar to the left of the main post? Or do you want your new sidebar to be to the right of the new post, next to the existing sidebar? Or do you want FOUR columns??

Customize Your Blogger Layout

There are many free third-party, three-column template downloads available online. However, downloading hacks can create several disadvantages. First, you may be disappointed with the specific template design, and if so you will not have the knowledge to modify it. Also, to the extent you've already customized your Blogger layout, you may lose all of those customizations if you download a hack. Adding all those customizations back can be a painstaking waste of time.

Also, many free templates have not been updated and that means they will contain outdated, incompatible code. Worse, some unscrupulous programmers may have embedded malicious code within their templates. There's no reason to take these risks, because modifying your existing Blogger template really isn't all that hard.

The Advantage of Free Blogger Templates

The free templates provided by Blogger are current and up to date, and there is no risk of harming your computer. Blogger updates, when they inevitably occur, will still support your existing Blogger template even if you've customized it, but they may not be so kind to a third party work-around. What's more, I guarantee you that you will get to the point of wanting to customize your blog template, and the knowledge you will gain from adding a third column on your blog will give you the confidence and knowledge you need to succeed in customizing it even further. This approach gives you total control over the layout and look of your blog.

If you have an existing blog and merely want to expand the template to include another column, our tutorials will be extremely helpful. The sole focus of Three Column Blogger is to show you how to add a new sidebar to your Blogger template - that's it. Tutorials on adding columns and sidebars is all we write about. Our tutorials will also show you how to adjust the margins and padding and other things incidental to adding a new column or sidebar.

Add a Third Column to Blogger Easily

So if adding a third column to your blogger template is what you want to do, you've come to the right place. Our tutorials will show you how to add a third column to any free blogger template quickly and easily. We offer step by step, template-specific instructions. No more guessing or translating from one three-column tutorial to another. We show you specifically how to add a third column to YOUR blogger template. We look forward to helping you achieve your third column nirvanna soon!