Custom header primer

To round out week three, we'll take just a brief detour from authorial nerding to tech geekiness: how to make a snazzy header. This not only gives a strong first impression, it brands your blog, distinguishing it from the herd.

Here are three Blogger methods, each increasingly complex (WordPressers might want to check out this intro, as well as this article). All our samples employ art created by Amanda. You can source images from the web also, but make sure you have permission to reprint or repurpose them. We'll explore licensing in-depth later, but here's a quick Flickr primer about the Creative Commons. Sites like Header Spot offer royalty-free images, as well as custom graphics as low as $30.

As the header suggests, this post is a primer. We'll explore more intricate solutions and hacks for folks with custom domains next week.

Control color and font
Start on the Layout Page. Click "Fonts and Colors" on the beige nav bar. The lefthand panel contains options for Blog Title Color, Blog Description Color, then – lower down – Blog Title Font and Blog Description Font. Righthand click-boxes control bold and italics. Links adjust the size of text.

The preview box displays changes. In a few clicks, I managed to make the class blog's header quite hideous. Luckily Blogger includes a "clear edit" button, right beside the "save" one...

Upload a background image
In Layout, go to Page Elements. Click the "edit" button on the header box. In the Configure Header pop-up window, select Placement "behind title and description".

Here's the original image that I'm folding, mutilating and stapling:

Click "shrink to fit," otherwise you could wind up with a massive header like thus:

This pushes your fresh content down the page, forcing reader to scroll to engage with new material. Not ideal. So let's try "shrink to fit".

From bad to worse, eh? So, you'll need to size the image – and perhaps also crop – it in a photo editing program. Blogger will give you the width in freaky small text at the bottom of the Configure Header box.

1. First adjust the width of the photo. That's 660 in the case of my Minima-template test blog.
2. Then crop its height. Around 150-170 pixels makes for a nice, shallow header. It adds color and character, but doesn't upstage the blog's content: the reason people are there.
3. Layout>Page Elements> Edit Header>Configure Header. Click "shrink to fit".

**

Upload a custom header

For maximum control of the look and feel, design your entire header – blending the text and image – in a photo-editing program.

1. Open a new file sized to fit your template. On Amanda's test blog, that's 660 x 155.
2. Go to Layout>Page Elements> Edit Header>Configure Header. This time, be a devil and click Placement>Instead of title and description.
3. I stuck with "shrink to fit" and it overhung the border a little. Most annoying. So I went into Layout>Fonts and Colors, then changed the Border Color to match the white background.

We can't cover all the intricacies of photo editing software in this class: there simply isn't time enough. But a few elements to play with, if you know (or are learning) a program:

1. Novelty fonts
2. Alignment (left, right or centered)
3. Collages
4. Drop shadows (Photoshop tutorial here)
5. Intensity of the image. Here I dropped the background opacity to 90%, so the darker parts of the photo didn't overwhelm the schmancy Papyrus font (which wouldn't bold).