Tuesday, January 3, 2012

More Header Design Tips

Last week I posted some general tips for changing the basic look of your blog header. We tiptoed into Template Designer and tweaked a couple of things. Do you want to do something jazzier? Like have a photograph with some text?

Something to consider before you start: if you're using a fancy background, such as one from Cutest Blog on the Block, I want you to think about your overall design. If your blog has an intricate background AND a fancy photo header, the look might be too busy. My advice is to do one or the other:
Fancy background with a simple header
Simple background with a fancy header

This is something that you can a LOT of time on, so I'll get you started with the basics. Feel free to create a bunch of different looks and ask your friends for input.

Click on Template.

Next, click on Adjust Widths

Now let's decide how wide to make your blog.

A good rule of thumb, especially as you're getting started, is to go with a standard size -- 960 is perfect for a lot of technical reasons that I won't go into. Trust me. Set it to 960 and click Apply to Blog, then click Return to Blogger.

960 will be the total width of your blog including your sidebar columns. So you want an image that stretches that entire width. Keep that number in mind as we work on your image.


What image do you want to be your header? If you have a blog about photography, you might want to use one of your shots or maybe an image of equipment. I have a friend who blogs about kindergarten experiences, so her header should represent that..

Open the image with whatever photo editing software you like to use. If you're not familiar with the photo app on your computer, Picasa is a free application you can download and it's easy to use too. A benefit with Picasa - it's owned by Google and every image you upload to your blog is saved in an album in Picasa.

(If you've never played around with your photos, I suggest downloading Picasa and using that!)

Crop and adjust the image to your specifications. Now for the fun.

Pixlr is a free, online photo editing site that lets you do some really cool stuff. You can spend the rest of your life on this site trying new things. If you're new to photo editing, I suggest using Pixlr-O-Matic for some fun, easy options.

Picassa is also a fun, easy photo editing program. It has to be downloaded as an application, so if you're hesitant about that, use Pixlr.

Warning, you can spend FOREVER on this so pace yourself.

Just make sure the width of your photo is the same width as your blog (in this example, 960 px).

Once you have the image and text the way you want it, Save it to your computer.

Now you've got a properly sized image stored on your computer, ready to upload to your blog!

Go to your blog and click the Design tab, then edit your Header. (You must have previously added the Header Gadget. If you didn't, click Add a Gadget and place it at the top of your blog.)

Where it says Image click the Choose File option and navigate to the place you saved the picture (hopefully My Pictures!). The photo will show in this window when it loads.

A couple of options for Placement:
If your header image doesn't include your blog title, you'll want to put the image Behind title and description.

If you've included your blog name IN your image, you may want to leave the Blog Title and Blog Descriptions blank OR click Instead of title and description.

You also have the option of including the description beneath your image.

Click the orange Save button, and Viola! Go go your blog and check out your new header!!

A couple of design tips:

Back to the advice I gave earlier about simple backgrounds looking better with a fancy header: these changes are made from the Template Designer. If you added a fancy background from another site and you want to get rid of it, you have to delete that gadget. But before you delete it, copy the code and paste it in a Word document in case you ever want to use it again.

Go to Template, click Customize, then click Templates.

A simple template that looks great is Watermark, then click one of those options.

Now click Background (under Templates) and choose a color scheme that looks good with your header. You can play around with this and see how it looks by clicking "View Blog." NONE of the changes take affect until you click the orange Apply to Blog.

Happy designing!!

I appreciate your comments and feedback - please leave yours below!


  1. Susan,
    You know so much. I never dreamed a person could blog so many lessons on how to set up a blogger blog. Thank you for your faithfulness to helping those of us who don't have your computer guru talent.

  2. Your post was simple amazing and I find it helpful as well. I was impressed with your blog. Thanks for sharing such information and just keep on sharing.
    website design


Thanks for the feedback!