Sharing the Love

So to share the love a little bit, and to make the 3 hours I took figuring this out a little bit more worthwhile here is my very first EVER tutorial! How To Make Your Blog 3 Columned! I'm going to explain this as well as I can. Messing with your HTML isn't nearly as hard as it looks. Or as hard as my last post made it look. I promise. Really.

And hey, if it doesn't work out you can always go back to the way it was before. Or you can e-mail me at my brand spankin' new bloggy e-mail address. TheCocoCafeMail@gmail.com. And I will try my very bestest to help you out. I really will. You see, I dont work anymore. Enough said.

SOOOOO here goes!

Ok so unfortunately for some of you, you will have to first change your template to Minima. Please tell me you know how to do that. But if you dont, its ok. Go to Customize, then Layout, then Pick New Template.

Now go into Edit HTML. Here is where we get sticky. Almost all of the changes we are making are going to be under Outer Wrapper. So scroll down until you find that section. It looks like this:

/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 840px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: left;
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: right;
padding-left:10px; word-wrap: break-word;

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

Have you found it??? Now right after that last } you need to cut and past this baby:

#newsidebar-wrapper {
width: 180px;
float: left;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}

Ok? Ok. Breath, your doing fine. That was the first step. And actually now you have a 3rd column. But you cant see it. So we better widen everything up.

So we need to find the code that looks like this (it should be above what we just messed with):

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

change the number under width from 660 to 860. (hey you say, what if I want it even wider? well, my answer to that is you must have a wide screen moniter. As do I, as do I. But not everyone does. And this is the widest that my old school moniter downstairs can see. And maybe some of your readers still have one. I know some of mine do. So go higher than 860 at their peril.)

Now go down to THIS code:

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

Change THAT 660 to 860 as well.

Last find this and change this 660 to 860:

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


Very last step now. Go way down to the bottom and find this one:

div id='sidebar-wrapper'>
b:widget id='Profile1' locked='false' title=About Me' type='Profile'/>
b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
/b:section>
/div>

And add this below it (each line needs to start with < So add those in. If you dont then it WILL NOT WORK. I cant because then this post reads it as code. Lol, I dont know how to get around it)

div id='newsidebar-wrapper'>
b:section class='sidebar' id='newsidebar' preferred='yes'/>
/div>

You are *hopefully* done! Go add something to your new column and then look at your page. You may need to tweak some things around. Like your columns might be in the wrong order. As in two side columns on the left and your body on the right for example. If so you need to go back into your HTML to the wrapper section. See where it says float;right or float;left? That is what changes this. Or you might be all off center. That can be tweaked in padding: On my blog I had to add the line padding: 30px; right under

#main-wrapper {
width: 410px;
float: left;

Any other tweaks that need to be done? Mess around a bit or E-mail me and I will try to help. Every blog is unfortunately different. But this worked for me and should for you too! Now we are all programmers!

Note: A few REAL programmers read my blog. Please dont make fun of my sorry attempts into your field.