What better way to start off a new month than with a blog makeover?!
Today I'll show you how I resized my blog.
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.
So go ahead.
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!"
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:
And if your header doesn't fit anymore, come back tomorrow for my tutorial on creating your own header!