How to widen your columns on Blogger

I have always wanted my main column wider. I just didn't get why it was so small with all that extra space on the left. I thought I wanted to go with a 3 column layout, but I decided against it. I think I like this better. Here's a tutorial on how to change to a 3 column layout.

Here's what I did to widen my main column and header. Let's start with the header.
Go to Customize, Layout, Edit HTML. Scroll down until you see this (although your number that is in red is probably 660 or something.)

#header-wrapper {
width:950px;
margin:0 auto 10px;
border:1px solid $bordercolor;
background-color:#3d310b;
filter:alpha(opacity=80); -moz-opacity:0.80; opacity:0.80; -khtml-opacity:0.80;

Change the header width number to 950. (I don't know why 950. That's just what I found online when I was looking at how to do it.)

Now scroll down aways until you see this:

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

Again, your number is probably 650 or 660 (I can't remember what it was originally.) Change this to 950 too.

One more thing. So far we've changed the actual blog space. Now we need to change your main post column. Scroll down to this:

#main-wrapper {
width: 650px;
float: left;
padding: 5px;
border:1px solid $bordercolor;
background-color:#3d310b;
filter:alpha(opacity=80); -moz-opacity:0.80; opacity:0.80; -khtml-opacity:0.80;

I think the original number was lik 410. It should be changed to 650.

Now, click Preview and see if your space has widened. If you love it, Save Template. If you hate it or something didn't work, exit without saving.

This is the site that helped me the most. It goes through the steps I showed you above, along with how to make your sidebar wider (which I decided not to do) or how to change to a 3 column layout. I think it's a little easier than the first link.

Let me know how it goes!

Keeping your Widgets Tutorial

Many of you asked for a tutorial on how to do some of the things I have done to my blog, so here it is! But, listen. I have no idea what I'm doing really. I read some things online, played around a little, and finally came up with how I wanted my blog to look. I created a "test" blog but I didn't end up using it. I just always made sure to PREVIEW and exit out without saving if I didn't like how things were looking. Let's take a look, shall we?


The first thing you should do is download/save a copy of your current template just.in.case. To do this, go to Customize, Layout, Edit HTML, Download Full Template. Then save it to your computer.

Now, while you're in the edit HTML screen, let's take a look at your widgets. If you scroll down, nearly to the bottom of the screen you will see a bunch of lines that look like this:

Here's what I did and you could too. Copy and paste those "widget lines" and put them in a Word document, or in an email to yourself so you have them. (Make a note as to WHERE they came from so you know where to put the widget code in the new layout.) Then delete all the old HTML code from your old template. Don't worry...it isn't really gone until you hit save.

Find the new layout you want to use. Paste in the new code for the new layout. Find the spot in the new code where the widget codes should go. Paste in your widget codes. Click Preview...and see what happens. If you're lucky, like me, you should see all of your old "stuff" in your new layout. If so, then you can go back and Save Template. But be sure you really want to save.

2 goofy things happened on mine that I had to fix but were very easy.

My post history and "about me" section ended up being in my sidebar twice. (They must carry over from the old blog but because I copied the widget code, they came twice.) Anyway, all I had to do was go to Customize, Layout, and delete the duplicates.

The other things was my Sitemeter. It is the only widget I have at the bottom of my blog. So, to save you a little HTML headache...if you have anything at the bottom of your blog, move it to your sidebar before you get started. It's much easier to move it when you're done than try to get the correct code.

Well, I just read that and I hope it makes sense. It seems a little wordy, but I swear it's easy. Let me know if you try it and if it works for you.

Next post: How to widen your columns

Ask and you shall receive

Many of you took the time to vote in my little poll thingie over there about what to do with my background. At first I freaked when the majority of you chose to change my background as I change my header because I am not HTML literate and in the past, each time I changed my background using Pyzam, I lost everything. However, I played around with it and learned how to copy and paste all my widgets back in! Woo hoo!

So here is my matching background for my current "wheat harvesting time" header. Whatcha think? Cute, right?

So now that I know what I am doing, I can get all matchy matchy with my backgrounds and headers. I can feel you are underwhelmed with this information, but I am very excited! Please humor me. Thank you.

Edited to add: Look at me go! Now I have learned how to change the width of my columns and header. Yay for me!