Wednesday, September 1, 2010

DIY Blog Makeover - Resizing Your Blog

Happy September!
What better way to start off a new month than with a blog makeover?!
Today I'll show you how I resized my blog.

NOTE: I was using the "minima" template when I designed my blog.
These instructions may not work exactly right if you are using a different blog template.

Without any adjustments, here's how my "test" blog looks:

Let's start the blog revamp by breaking out of that annoyingly constricted 660px wide wrapper, shall we?

So start at your blogger homepage and click the "design" tab:

Then click the "edit html" tab:

The very first thing you need to know if you are going to design your own blog is to make sure you back up your html before you change it!
I always copy it and send it to myself in an email so that if I mess it up I can get back to its prior state.

Now it's time for the Ctrl + F trick. . .
You could just search through that whole entire page for the little html codes you are looking for, but if you hold down Control while you push F, a search box will appear, and you can type what you are looking for into the search box and the computer will find it for you.

Amazing, huh?

So go ahead.

Try it.

Hold Ctrl, press f, and viola!
The search box should pop up in the right top corner.

Now type outer-wrapper into the box.
You will see this:

See where the arrow is pointing?
Change the width from 660 to a larger number of your choice.
I suggest 1000px or less.

Now, if you hit the "preview" button at this point, don't freak out!
There's more to do!

Right below the outer-wrapper section, you'll see this:

You can make both of those widths larger, but the sum of their pixels has to be less than the size you set the outer-wrapper.

Sooooo. . .
If you made your outer-wrapper 1000px, you may want to set your main-wrapper to 700px and your side-wrapper to 250px.

Or. . .
If your outer-wrapper is 850px, you may want your main-wrapper to be 550px and your side-wrapper to be 200px.

Experiment and see what sizes work well for you.

I personally like to have lots of room for my posts, and prefer to keep my sidebars smaller.

Once you've got the body of your blog lookin' all shipshape and lovely,
we'll go to work on your header.

Use the handy-dandy ctrl + f to find #header-wrapper.
Should look like this:

"Say no more, Mandy! I've got it!"
Yep :]
It's pretty much exactly the same as before. . . Change the pixels from 660 to whatever your heart desires.

I like to keep my header about the same size as my outer-wrapper, but some people make it smaller or larger. . .
It's just like cooking- season to taste. :]

So here's what we accomplished:

[if you want to know, the exact measurements that I used here were:
outer-wrapper: 1000px
main-wrapper: 750px
side-wrapper: 240px
header-wrapper: 1000px]

And if your header doesn't fit anymore, come back tomorrow for my tutorial on creating your own header!

post signature


MeredithW said...

Hey lovely!
Just wanted to let you know I got your necklace. It's absolutely amazing. I've been wearing it a lot and it'll get a mention on my blog when I've recovered from this flu!
Lots of love x

Jacky {The Sweetest Petunia} said...

Okay, I'm excited about a blog header blog is lovely {only because I won a giveaway, could never afford it!}, but I'd like to know because I *might* start a shop blog someday soon... :)

Jessica @ Barefoot by the Sea said...

What a wonderful and different tutorial. Needless to say, I can use it!

Lindsay - Paint Me A Picture said...

So glad you shared :) I have been thinking about changing things up.

hiyaluv said...

awesome tutorial!!! i paid for my blog design and it was not cheap. :/ I just don't have time to do my own sadly-although I really enjoyed doing it when I did have time! :) This is great though-truly and definatley one to book mark. Can you teach me how to number my comments? :)gina

Elisabeth S. said...

Awesome! I'll definitely be giving my blog a makeover! Thanks for all the time and work your putting into this! I'll be sure to share :)

Bec said...

Or just have your web designer husband do all the tech stuff for you :) I mean, I did do the header so I helped some, but life is so much easier with a computer geek in the house!

The Neill's said...

Thank you so much for doing this tutorial! I have been asking Libby for advice on how to get started with this and she sent me your way. I am, however having problems...I can not seem to find the items in the html box. I search for "outer-wrapper" and it tells me there are no matches! I have even gone through the entire thing manually and can't seem to find anything that are similar. Please help!
Thanks, Kiri

The Neill's said...

Well, I think I figured it out. Had to go about it a different way, but got it done! Thanks SO much for these tutorials. Now I just need to post a!

Jenni Wells said...

resizing your blog....

when I click ctrl F the "find" tab comes up fine but when I type in "outer-wrapper" nothing is highlighted and it says "no matches found" Any suggestion?

Carol said...

Hi Mandy,
Thanks so much for this great info! I have been trying to re-vamp my blog with little success. I tried changing all of the html codes you suggested and it definitely spread things out, but it didn't fit the blog background I have. I tried to go to minima, and had a difficult time. I'll keep trying... :)

Thanks again,