Three Column Blogger

Three Column Minima Lefty Stretch - Two Columns on the Right

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

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

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

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

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

#main-wrapper {
margin-$endSide: 2%; <-------change to $startSide
width: 67%; <-------change to 48%
float: $endSide; <-------change to $startSide
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

That piece of code should now look EXACTLY like this:

#main-wrapper {
margin-$startSide: 2%;
width: 48%;
float: $startSide;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

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

#sidebar-wrapper {
margin-$startSide: 2%;
width: 20%;
float: $startSide;<-------change to $endSide
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

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

#right-sidebar-wrapper {
margin-$startSide: 2%;
width: 20%;
float: $endSide;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

The new code block should look exactly like this:

#main-wrapper {
margin-$startSide: 2%;
width: 48%;
float: $startSide;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
margin-$startSide: 2%;
width: 20%;
float:-$endSide: 2%;

display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#right-sidebar-wrapper {
margin-$startSide: 2%;
width: 20%;
float: $endSide;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

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

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



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:

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

Labels: 3 Column Blogs, three column blogger, three column minima lefty stretch

3 Column Rounders 4

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

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, in the same " */ Footer " section where you are now working, scroll down a little further 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, 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!

Labels: 3 Column Blogs, 3 Column Rounders 4, Three Column Rounders 3

Three Column Minima Lefty Stretch

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

Labels: 3 Column Blogs, 3 Column Minima Lefty Stretch, Three Column Minima

3 Column Rounders 2

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

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

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_cap2_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_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;
}

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, in the same " */ Footer " section where you are now working, scroll down a little further 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, 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!

Labels: 3 Column Blogs, Column Rounders 2, Three Column Rounders 2

Three Column Rounders 3

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

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/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 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/
new_corners3_cap_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/
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;
}

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, in the same " */ Footer " section where you are now working, scroll down a little further 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, 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!

Labels: 3 Column Blogs, Three Column Rounders 3

3 Column Rounders

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

#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/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;
}

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. You will also need to remove $titleBgcolor from "#footer wrap 2", right after "background". 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_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;
}

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, in the same " */ Footer " section where you are now working, scroll down a little further 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, 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!

Labels: 3 Column Blogs, Three Column Rounders

Three Column Denim

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 */
}

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 (or use control F) to the " */ Footer " section, and the scroll a little further 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:

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

Labels: 3 Column Blogs, Three Column Denim

Three Column Minima (Layout Version)

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

Labels: 3 Column Blogs, Three Column Minima

Three Column Blogger

Saturday, June 13, 2009

Three Column Minima Lefty Stretch - Two Columns on the Right

Wednesday, November 19, 2008

3 Column Rounders 4

Tuesday, November 18, 2008

Three Column Minima Lefty Stretch

Wednesday, October 15, 2008

3 Column Rounders 2

Saturday, September 27, 2008

Three Column Rounders 3

Saturday, September 13, 2008

3 Column Rounders

Monday, September 8, 2008

Three Column Denim

Wednesday, September 3, 2008

Three Column Minima (Layout Version)

three column mods for (click link)

Very helpful like-minded bloggers

Previous Posts

Archives