Blog Design - Guest Post

For today's post I’ve invited a good friend, my go-to person with expertise on blog design - Evelyn, AKA Evie J! She helped us with YAtopia’s layout and my own blog as well. She’s here with a few tips, and you can check her out at: www.evelynjanelle.blogspot.com.

* * *

Hey, all! I'm on the YAtopia blog! Eeek! Yay! Whoo! All right, excessive exclamation point usage is done, I promise. Now off to bigger, better, and brighter things like tips on making a blog your own.

Ever since I started designing my own layouts instead of just using pre-made templates about a year ago, I've been bombarded with the same questions: How did you make your layout? Will you teach me? Well, the answers to that: It's complicated. I can teach you only specifics.

What many first fail to understand is that everything on blogs is put in separately. Unless you are going with pre-made templates (in which case, don't bother with the following, eh?), there is no easy "slip this code in and voila, you have a new blog layout." So here are "how-to's" for three of the main elements bloggers want:

First things first, the following directions may look extremely complicated, but I promise they're not. And they are for the Minima template (*cough*the new templates suck monkey butt, and I highly suggest switching to the Minima template if you're going to really go for an original look; the coding is easier*end cough*).

Also, memorize this: Dashboard>Design>Edit HTML. This is how you get to your blog's coding.

ON HEADERS:
To Create a Header:
Well, I can't tell you exactly how to make one, considering we all have different creative views. I use Photoshop to make mine, but you can use any program really, including online programs for free like Fotoflexer. You can also find pre-made banners and add text to them, like the "blank" ones on The Cutest Blog on the Block.

In my opinion, if you're not using a pre-made one, it's best to create a header the size you're going to want it, or bigger (in which case check "shrink to fit" when adding the header; see next step). You'll find the width of your header-wrapper by scrolling down only a little in your HTML section.

To Add a Header:
This is an "easy add," as you don't have to deal with HTML.

Dashboard>Design>Directly under where it says "Navbar," you should see your blog title and (Header) next to it>Click "Edit" to the right>Follow the directions.

To Center a Header:
I see that a lot of people manage to upload their banners, but then it'll be off to the side when it's clearly supposed to be a centered banner.

So visit your HTML section and scroll down until you see your Header section>Check your header's width. It should be a little smaller than your Outer Wrapper's width. Keep in mind that all coding may vary, so just find your "header" section and look for "width" beneath. For example:

Mine is:
#header-wrapper {
width:920px;
margin:0 auto 10px;
}

My Outer Wrapper (scroll down a bit more in your HTML section to see it):
#outer-wrapper {
width: 940px;
margin:0 auto;
padding:0px;
text-align:$startSide;
font: $bodyfont;
}

You can adjust the width until you feel comfortable. Always click on "preview" before saving. Remember that it is only adjusting the header space. That means that your header will be whatever size you choose when you uploaded. If your header is too big, click the "Shrink to Fit" option when uploading. It'll shrink it to the width of your header space.

ON BACKGROUNDS:
To Create a Background:
Like with with creating a header, I can't tell you exactly how to use your own creativity, but I can tell you what size your background should be. First, I don't think there are any online programs that let you make backgrounds the size you need. You can use programs like GIMP (which I believe is free...?) or Photoshop, which I use.

I always start with a 2000x1000 pixel size canvas. That's 2000 wide and 1000 high. And when you see "px" below, that stands for "pixel."

When making your background, the first thing you want to know is how wide your content page is. Go to your HTML section and scroll down until you see your Outer Wrapper. You should have something similar (it may vary depending on your template *cough*still think the new ones suck*end cough*) to this:

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

The width is what you need. Mine is set at 940, so my background's post space is approximately 1000px wide. That's pretty standard for three-column templates, by the way.

I usually suggest about 30px wider on each side than your blog is wide. So if your Outer Wrapper is only 700px wide, I suggest doing a 760px wide "white space," or "post space" when creating your background. But that choice is yours.

To Add a Background:
Back in your HTML section, scroll down a little ways (this is directly after the variables, so scroll slowly) until you find something similar to the following:

body {
background:#fff;
margin:0;
color:#333333;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Add the following in bold:

body {
background:#fff url("LINK TO IMAGE");
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Position means where you want it aligned. Probably in the center, so you don't need to mess with that. Attachment means do you want it to scroll or stay fixed (this blog is an example of fixed; scrolling means that it'll scroll with you as you scroll down the page). If you want it to scroll, then change "fixed" to either "none" or "scroll." Repeat means just that. Do you want your background to repeat. If you're going with the scroll, then you want your background to repeat, so change "no-repeat" to "yes."

So if you have a background like YAtopia (where you have two distinct sides and it doesn't move), leave the code as is. And now every time you want to change it, you just change the link of the image.

ON COLUMNS:
This is the third most common question I get: How can I get three columns? If you have a standard template (*cough*like the amazing Minima*end cough*), then you'll most likely start out with two columns, but sometimes three is better for you. So there are two different types of three columns: Sidebars on each side of the post space, or sidebars both on one side.

Sidebars on both sides:
Guess where we're starting? Gah! The HTML section! :)
Scroll down to your Outer Wrapper section again. You'll have something similar to this:

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

#main-wrapper {
width: 550px;
float: $startSide;
margin-left: 5px;
margin-right: 7px;
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: 170px;
float: right;
margin-left: 5px;
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 */
}

Directly beneath your sidebar-wrapper, add this code:

#left-sidebar-wrapper {
width: 165px;
float: left;
margin-left: 35px;
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 */
}

That's it.

Sidebars both to one side:
To the same as above, but in the added code, change "float: left;" to "float: right;" like so:

#left-sidebar-wrapper {
width: 165px;
float: right;
margin-left: 35px;
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 */
}

That will put both columns on your right, screen left. Over there---> If you want them on the other side. Change the original code of the main-wrapper from "float: $startSide;" to "float: right;" and the original sidebar code from "float: right;" to "float: left;" and leave the newly added code. So you'll end up with this:

#main-wrapper {
width: 550px;
float: right;
margin-left: 5px;
margin-right: 7px;
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: 170px;
float: left;
margin-left: 5px;
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 */
}

#left-sidebar-wrapper {
width: 165px;
float: left;
margin-left: 35px;
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 */
}

Remember to preview before saving, and it's always good to download and save your template before messing with it. You can adjust the margins and widths to your liking. The larger the number, the wider the column or margin. Remember that the three widths of your sidebars and post space should not exceed the width of your outer wrapper. For example, my outer wrapper is 940 and my main wrapper and sidebars combined (including the margin area) is 937.

Anddddd...huzzah! There you have it. "How to's" to three of the most common elements bloggers want to manipulate. Now, as I've said a few times (*cough*) that the above is directly from the Minima template. Blogger has added brand new templates which make it easier to mess with the columns just using the template designer.

Because I add many elements to my blog, I will forever use the Minima template because there's much more room for manipulation. Sometimes codes won't work for the newer templates and I'm pretty sure Blogger made some changes on purpose. I swear it did!

Anyway, I'm always open for blog questions (specific ones!), so if you're wanting to try something and need to know how, shoot me an email or check out my blog tips I post every Thursday. Have fun making layouts your own! There's nothing like having your own layout just for you, eh? :)

Bye!
Evie