Trend Blogging Part 3 – Creating A Custom Blogger Header Image

One of the things I recommend people do when creating a blog for Blogger, whether it’s for Trend Blogging or a general blog, is to create a custom header graphic for your Blogger blog.

In other words, instead of a blog with a boring header like this:

Blogger Old Header Image

You want to invest a little bit of time and upgrade the header to look a bit "spiffier". I recommend you create something like this:

New Improved Header Image For Blogger

So, to help you figure out how you can do this quickly and efficiently, I created this new video below. In this video I’ll share with you how I create a header from scratch and how you place the header on your blog in about 10 minutes.

Get the GFXwriter HERE

Here is a "blow by blow" recap of the video (It’s not as detailed as the video, but at least you can get the "picture"):

1. My Blogger Template of Choice:

I use the "Mr. Moto" template, as it is one of the easier templates to modify in Blogger. If you haven’t done so already, go to the "Pick New Template" page and choose the "Mr. Moto" template (Template -> Pick New Template). Be sure to click on the "Save" icon once you’ve selected the template.

2.How to quickly find the proper dimensions for your header

Go to the "Edit HTML" page (Template -> Edit HTML). Go to the "Edit Template" section of this page. Scroll down until you find this area:

#outer-wrapper {
  margin: 0 auto;
  border: 0;
  width: 692px;

What you’re looking for is the number in red. This will be the width of your header image. Write it down.

As you can see there is no number for the height… so you’re pretty much free to choose whatever you want. I recommend you use a header height of 160px.

3. Where to find suitable images for your blog

I use a royalty free photo site at SXC.hu. The images here are free, however be sure you read the "fine print" to see what restrictions apply to the photographs.

4. How to create the header with an image editor

As you can see in the video, I use a program called GFXwriter by Incansoft (BigMike’s company, for those familiar with the Warrior Forum). I often use Photoshop as well, but I’ve found this program to be a lot faster to use for creating these types of headers. It’s only about $20, and is a powerful tool for any internet marketer who’s on a limited budget. Be sure to check out the video to see how simple it really is…

And if you’re interested you can get GFXwriter HERE.

By the way, here’s a reminder: the header size is 692px wide and 160px high.

5. Placing the Header

Once you’ve created the header, go to the "Page Elements" page in Blogger (Template -> Page Elements). Click on the "Edit" link in the "Header" section of this page (this will open a new window). In this new window, click the radio button for "From Your Computer". Then browse for your file on your computer. Once you’ve selected your new header it will show you a preview of the header. Go to the "Placement" section of this page and choose the radio button for "Instead of Title and Description". Then click "Save Changes" (this will close this window).

6. View your blog

Just click on "View Your Blog" and you will see your brand new header displayed promptly at the top of your page… actually just below the Blogger nav bar.

That’s it folks!

In the next video I’ll show you how you can get rid of the Blogger Nav Bar, and how you add Google Analytics to your Blogger blog. Both of these things are important as you start growing your Blogger blog(s).

[tags]blogger, blogger template, blogger layouts, blogger header image, trend blogging, blog marketing[/tags]

Related posts:

  1. Trend Blogging Part 2 – Setting Up Your Blogger Blog
  2. Trend Marketing Case Study Part 1 – How To Find A Topic For Trend Blogging
  3. Trend Marketing Case Study – Overview

, , , , ,

8 Responses to Trend Blogging Part 3 – Creating A Custom Blogger Header Image

  1. MrBrown January 1, 2008 at 7:58 pm #

    I just wanted to add that a nice web 2.0 style would help your header stand out. If visitors remember your header, they remember your blog.

  2. Shirley November 29, 2009 at 10:44 pm #

    Thanks! My only issue is this grey bar remains at the bottom of the header, between my image and the criss-cross lines. Have any suggestions for that, or is it built into the design?

  3. Zahid Saeed December 5, 2009 at 12:49 am #

    Thanks this information is very helpful for me thanks again

  4. julie mouser December 22, 2009 at 11:23 am #

    This was extremely helpful and simple! Thanks so much for the info!

  5. Courtney January 1, 2010 at 6:20 pm #

    To get rid of that grey bar – go into EDIT HTML – and find the header code & delete it all (there’s a lot). Then save Template & you won’t have the grey bar anymore.

  6. abby January 14, 2010 at 5:41 pm #

    worked like a charm – your the man!

  7. Margaret Duarte June 29, 2010 at 10:55 pm #

    Thanks for your generosity in sharing your expertize. It’s heaven sent for beginners like me. I’m passing along your website in my blog today.

  8. subcorpus September 10, 2010 at 10:18 pm #

    this has been very helpful …
    informative article …
    thanks …

Leave a Reply