Crafting Your Online Presence: Customizing Your Blog Header, the Simple Way

Craft & Design

Banner Dianegilleland Column
header_design_21a.jpg
So you’ve started up a new blog. You can’t exactly call yourself tech-savvy, so you’ve taken advantage of a free blogging platform like Blogger or WordPress, and you’ve selected a nice design template from among their selection. So far, so good.
But now, your new blog could really use a spiffy custom header, so people can distinguish it from all the other free blogs using your same design template. How do you go about making a header when you don’t know an HTML from a JPEG? You do have options… read on!


header_design_01.jpg
Selecting a Design Template You Can Customize Easily
In earlier days of blogging, you’d choose a free blog template, but then to customize its header, you’d need some coding knowledge. Nowadays, more and more free templates have customizable headers. If you start a new blog on Blogger these days, for example, and you select from one of their starter templates, it generally comes with an editable header. Take a look in the Design tab of your blog, and you should see an Edit link, like the one above, in the Header block – that means you can add your own.
header_design_06.jpg
Now, if you’re using a free WordPress blog, some templates have a customizable header and some don’t. In your Dashboard, click the Appearance link, and then click Themes. Look on the right side of the page for the Feature Filters link, and then you can select Custom Header, as you see above. That helps you narrow your theme search.
Even among the WordPress themes with headers you can edit, however, not every theme is created equal. Some themes have very simple processes and some have more complicated ones. It’s a good idea to install any theme you’re interested in on your new blog. Click that Appearance link in your Dashboard again, and look around in the theme controls. How easy are the instructions for customizing the header? If they’re simple to understand, then the template is a good bet. If the instructions seem confusing, then you could be in for some headaches. Remember, you can always change blog templates. Why not start simple and get used to the process first?
header_design_07.jpg
Lastly, this may go without saying, but when you’re shopping for templates, look for templates that actually have image-based headers. These are the most likely to offer easy customizations. A theme like the one above, that has no header at all, would require some more advanced coding skill to customize.
header_design_05.jpg
Understanding Sizing
I know you’re eager to get to the process of making a pretty header, but wait one moment – there’s an important idea you need to understand first. Headers are measured in pixels, and your blog template requires a very specific pixel size – both in height and width. You’ll need to find out what that size is before you start building your header.
Some blog themes/templates are very helpful and tell you this information, like the one above. (It’s called Twenty Ten, and it’s pre-installed on all free WordPress blogs these days.)
header_design_08.jpg
If the template you’ve selected doesn’t specify a size for your header, then you have some sleuthing to do. In Blogger, you can head to your Design tab and click the Edit link in your Header box. That brings up a box where you can upload your finished header. Look at the bottom of this box. Often, you’ll see an indication of the width of the blog’s header in pixels. We still don’t know the height, but we can at least get started.
header_design_22.jpg
If you can’t find any size information for your theme’s custom header, try this: find a header on a similar blog, and right-click and save that image to your computer. Then, upload it to your photo editing program of choice and it will tell you what size it is. That gives you a starting point for your own header.
You’ll need to make your header the same height and width that your template specifies. If you don’t, then most themes will squash or stretch your header to fit, and this will create distortions.
header_design_10.jpg
Making That Header (finally!)
Now, at last, we can get creative! A great many headers are created in Photoshop, but if you don’t have it on your computer, don’t worry. There are free photo-editing tools like Picnik, Splashup, and FlauntR that can handle the basic functions you’ll need to build a header: taking an image, cropping and re-sizing it, and adding some text. All three are very easy to use, and you can Google for tutorials if you get stuck.
You can start with a wide variety of image material for your new header. Maybe you have a great photo you’ve taken. Maybe you’ve scanned some favorite fabric or a piece of stitchery or quilting. Maybe you’ve created an illustration using specialized software on your computer. Whatever you’re starting with, it’s a good idea to make sure it has a fairly horizonal orientation.
header_design_09.jpg
Once you have this image, bring it into your photo editing tool and crop it to the height and width your blog template specifies for headers. Here’s where things can get tricky – it’s surprising how little visual information can really fit inside a header! Not every image will take such an extremely horizontal crop well. You may need to play around with several images before you find something that works.
Remember, you also need to leave some room for your blog’s name to read clearly! So once you have that image cropped to your liking, use the text tool in your photo editor to add your blog’s name (and tagline, if you’re so inclined).
Once your header is done, upload it to your blog template and see what happens. You may have to make some slight adjustments to the height or width so the image doesn’t distort. You may want to change the text color or size. Header design is usually a back-and-forth process, and it can take a few tries to get it right.
header_design_21.jpg
Thoughts on Designing Headers
It’s not necessarily easy, arriving at a good header design for your blog. I think a lot of new bloggers assume the header needs to function as a kind of eye-grabbing headline, but in reality, a header is something else entirely.
Your blog’s header is responsible for setting the overall atmosphere of your blog. The eye-grabbing, then, is done by the first photo in your most recent blog post. I tend to think that a header that’s too complicated or detailed will visually “fight” with the other elements on your blog page. A simpler header helps create a harmonious whole.
If you want to go deeper into this subject, you might like this how-to from Musings of a Housewife and this one from Blissfully Domestic.

About the Author:
author_dianegilleland.jpg
Diane Gilleland is the Editor-in-Chief of CRAFT. She also produces CraftyPod.com, a blog that geeks out on crafting and helps crafters use the web more effectively to promote their businesses.

18 thoughts on “Crafting Your Online Presence: Customizing Your Blog Header, the Simple Way

  1. Ros says:

    Also, remember that your readers won’t be reading your blog on your computer. Think about how your header will appear on much smaller/larger screens. In particular, don’t make your header so deep that people will have to scroll down to read your first post!
    Also, slightly OT, but if you’re starting a new blog, please, please, please don’t put one of those widgets that automatically plays music on it! People are reading your blog all over the place – libraries, offices, at home with the radio already on… They don’t need additional background music and for many people it will automatically have them reaching for the back button and away from your blog.

  2. ellen says:

    Thanks for the instructions. When I started my blog it was “by guess or by golly” and there are still things I do that way!

  3. tagueoren says:

    must look at this suprisely to get new coupon

  4. rhythm saparia says:

    visit and see my header- articlesru.blogspot.com

  5. rhythm saparia says:

    visit and see my header- articlesru.blogspot.com

  6. Reviews webs says:

    It’s actually a nice and helpful piece of info. I am satisfied that you simply shared this helpful information with us.

    Please keep us informed like this. Thanks for sharing.

  7. information says:

    I uite like reading through an article that can make people
    think. Also, thank you for allowing for me to comment!

  8. website says:

    It’s very trouble-free to find out any topic on net as compared to textbooks, as
    I found this paragraph at this web site.

  9. Talk N Text Call and Text Promos says:

    Wow. This is really helpful tutorial, very nice and clear, easy to follow. Thanks a lot for this info.

Comments are closed.

Discuss this article with the rest of the community on our Discord server!
Tagged

ADVERTISEMENT

Maker Faire Bay Area 2023 - Mare Island, CA

Escape to an island of imagination + innovation as Maker Faire Bay Area returns for its 15th iteration!

Buy Tickets today! SAVE 15% and lock-in your preferred date(s).

FEEDBACK