Customizing Your Blog - Part 4 Creating a New Header

If you haven't already done so, I recommend reading the previous posts in this series before reading this one.
Customizing Your Blog - Part 1 Gathering Patterns and Colors
Customizing Your Blog - Part 2 HTML Code
Customizing Your Blog - Part 3 Fonts

There are several ways to go about creating a custom header for your blog. We are going to cover just a couple - adding a picture and creating a design with software you already have. Thankfully, Blogger has made it easier to change the header image in the page elements section rather than having to go in and fiddle with the html template.

The first way is also the simplest and easiest - adding a picture. If you have a picture you love that goes right along with your blog title or theme it's easy to add it to your header. Most of the time you don't even need to resize it! Just login to your dashboard, click on Layout (or Template for some), click on Page Elements, and click to edit your header. You should see a window pop up that looks like this:Let's talk about what's on this page. First you have your blog title, which you can change to whatever you want, whenever you want. Then you can type in a description of your blog. When you are adding just a photo I recommend clicking the option to place it behind the blog title and description so it will look similar to this example from Sea Star Academy's blog. (I have no idea if this is what she did but this is what your blog title and description would look like placed in front of your photo)

See how nice that is? Finding a perfect picture to match your blog's title or theme is the easiest way to update your header and personalize it to YOU. You can upload the picture directly from your computer or if you have it stored on an online site like Flickr you can insert the web address of the photo. As soon as you enter the web address or select the picture from your computer blogger will automatically show the image. I suggest clicking the shrink to fit box before uploading the photo. This insures that the picture won't be to wide for your blog. Remember to save the changes.

EDITED: Some bloggers were having trouble with their photos being to long. To fix that you need to resize or crop your photo using the photo editing software on your computer. If you don't have any, never fear! Flickr allows you to resize and crop any photo you have uploaded. I think this is actually a better option because you don't have to worry about ruining your original photograph. In Flickr click on the photo you want to crop. Right above the photo you'll see an option to "edit photo". Click on crop. At the top enter the width (1st number) and height (2nd number) where it says "actual size". This creates a "window" that you can move around on your photo until you get the part of the photo you like the best that fits in the parameters you set. Click OK. And save. Use the web address for the large size of your photo. Hopefully that will work!

Creating a custom header (like my goofy open head up there) requires that you have some type of image creating software (Photoshop, Gimp, CorelDraw, etc.). I created mine using Photoshop. I really can't help you too much here because all software is a little different and you just need to learn how to use yours. The best way is to play around with it. When creating a new file in your image software I recommend a width no wider than 750 pixels wide. The height doesn't matter as Blogger will automatically adjust to accommodate the height. Using a height that is 1/4 - 1/2 the size of the width creates a more pleasing header size, at least in my opinion. Once you've created your header save it as a jpg or gif file. Log in to your dashboard, click on Layout, click on Page Elements, click to edit your header and before uploading your image click the "instead of title and description" button. It's that easy!

Fiddling With Borders

If you're happy with what you've created, great! But there are some of us that like to tweak things just a little more. Say you don't like having a border around your header or you want to create a dotted line instead. Here's how to do that.

Click on Edit HTML under the Layout section in your dashboard. Scroll down just a little until you see something like this.

/* Header
-----------------------------------------------
*/

#header-wrapper {
margin:0 2% 10px;
border:1px solid $bordercolor;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

See where it says border? Just change the pixel size to 0 to get rid of the border. Want a thicker border? Up the pixel size. Make sure you click preview to see what you've done before saving. Want just a border line on the bottom or top or just on the sides? Then change border to border-top, border-bottom, border-left, or border-right. Add a new line for each one. Here's an example:

#header-wrapper {
margin:0 2% 10px;
}

#header {
margin: 5px;
border-top: 3px solid $bordercolor;
border-bottom: 3px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

I didn't want a double line so I erased the border under the header wrapper (which would be the outer border) and created a top and bottom border line under header that is 3 pixels thick. Remember from the html tutorial that the $bordercolor was a variable (or rule) I set for the computer to follow. This is what the border now looks like:
Now see where it says solid on the border line of code? That's telling your computer you want a solid line. You can change the word "solid" to any of the following words to make the line: dotted, dashed, double, groove, ridge, inset, or outset. For example I created this border:



Using this code:

#header-wrapper {
margin:0 2% 10px;
border:4px ridge $bordercolor;
}

#header {
margin: 5px;
border:4px dashed $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

The outer border (header-wrapper) is a ridge while the inner border is dashed. Pretty cool, huh? And guess what? You can do this wherever it says border in your template! You can even copy the border line of code and add it where there isn't a border anywhere in your template. Just be sure to preview your changes before hitting that save button. Also, if you decide to put a border around your posts you need to add a padding line of code if there isn't one already so the words of your posts aren't right up against the edge of your border. The code looks like this: padding:1.5em; and is placed just under the border line of codes.

What if you want a particular border to be a different color than what you specified in the variable section? Then change $bordercolor to #colornumber adding the color code you want where it says colornumber. Yup, it's that simple.

I've got a couple more of these tutorials for customizing your blog left to post. Please ask questions if you have them. I think I will add a Mr. Linky to the end of the last tutorial so those of you that found these helpful and actually personalized your blog can sign in so others can admire your handy work. You know like Our Tribe of Five, Sea Star Academy, Magic Beans, and Merry Weather. Great job, y'all!