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:

<div id='content-wrapper'>

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

<div id='main-wrapper'>

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

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

Note: this will also insert the RSS feed widget into your 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:

<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
<div id='left-sidebar-wrapper'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'>
<b:widget id='Subscribe1' locked='false' title='Subscribe' type='Subscribe'/>
</b:section>
</div>

<div id='main-wrapper'>

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