blog design: layout setup

Here we go with blog design lesson number 2!
Here is lesson 1 if you missed it.


This post is going to be about setting up your blog width and dimensions for posts and sidebars.
 You will have to edit your html but don't worry, you can do it! :)


First I want everyone to go to the "design" tab then "edit html".
Next I want you to check mark the box that says "expand widgets templates"
Then I want you to press ctrl a {to highlight everything} then ctrl c {to copy everything}


Then paste {ctrl v} that into a word document.
Now you have a backup copy of your original html in case anything should go wrong. :)


Ok now that we've done that lets get to work!


Here are some definitions your going to need to know....
Outer-Wrapper
Main-Wrapper
Sidebar-Wrapper

When I design blogs I like to make the post area really wide so that I can use "x-large" pictures. To adjust the width of these three parts go to edit html.
Scroll down til you see this...

I usually make the width of my outer-wrapper 1000px.

Now scroll down a TINY bit til you see....

I make my main-wrapper 700px and my sidebar-wrapper 250px.

Warning: You might need a calculator for the next part.

You can make these numbers whatever you want them to be BUT the total number of pixels you use for you main-wrapper and sidebar wrapper CANNOT exceed the number of pixels you used for you outer-wrapper.

Lets talk about padding for a second.

padding: space around the outside aka... border

Under Out-wrapper see how I have....

padding: 10px 10px 10px 10 px

is around the top

is on the right side

is on the bottom

is on the left side

Since I have padding on the left and right side I must add that into my calculations.

Notice how under sidebar-wrapper I also have 15px in the left-side position? Yep, add that too!

So I have 700px for the post area +

250px for the sidebar +

35px in combined padding area

= 985

YAY smaller than 1000!

So technically I could use up more pixels but,

 I am happy with how it looks so I am just going to leave it.

Everyone with me so far?

Next I am going to show you how I got my dashed border outlining my outer-wrapper area.

Go back right to where we were working in our html before.

Copy what I have underlined in yellow and put in under padding {or if you don't have padding under background}

This is going to put a border around your blog.

You can change where it says 3px to any number you want to make it skinnier or fatter.

I would keep it below 5px though.

You can changed where is says "dashed" to solid or dotted. Whatever you want!

#e5683e is a hex code.

That tells blogger what color you want.

You can find any colors hex code using this chart.

To get the border on the left side of my sidebar column you use the came code.

But notice that I only have the line that says border-left.

Experiment. Try stuff out. Try putting a border around your whole sidebar. Try different colors.

***REMEMBER***

Save a copy of your html first. Then if you go overboard and mess something up beyond repair you have a copy. ALSO make some changes to your html the click PREVIEW. If you like what you see, great push save! If not, just click clear edits and it will erase your changes.

Happy layout-designing!

Let me know if you have questions!

And i would ♥ to see what you guys do so leave a link in your comment!