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).

Customizing your blog: Custom header images and good SEO

Custom-image headers bring branding dash and swagger, but eliminate a golden opportunity to woo the search bots. When you select "Instead of title and description" for your header image, Blogger cuts these elements from the high-value keyword space right at the page's top. The Google juice drains away like life blood ... But all is not lost.

Here's the patch. As always, consider tinkering on the test blog before the live one.

Go to Dashboard –> Layout –> Edit HTML.

Before we touch anything, backup your template.  Just in case...

Check the “Expand Widget Templates” checkbox.

Search for the line <div id='header-inner'> and add the following code immediately following that line:

<div class='titlewrapper' style='background: transparent'>
  <h1 class='title' style='background: transparent; border-width: 0px'>
    <b:include name='title'/>
  </h1> 
</div> 
<b:include name='description'/> 

The end result should look like this:

Now scroll up in your template to find the </b:skin> line.  Use your browser’s search function to help you find it – it’ll probably look something like:

...
body#layout #sidebar {   <-- This part will
padding: 0;              <-- vary based on
}                        <-- your template
]]></b:skin> </head>
...

Copy and paste the following code just before the </b:skin> line:

#header {
  position: relative;
  width: 648px;
  height: 150px;
}
#Header1_headerimg {
  position: absolute;
  width: 648px;
  height: 150px;
  top: 0;
  left: 0;
}

You will need to replace the width and height values with the actual width and height of your header image.

Click Preview to make sure things look correct and “Save Template” if they do.