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:
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:
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.
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]
Comments
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.
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?
Thanks this information is very helpful for me thanks again
This was extremely helpful and simple! Thanks so much for the info!
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.
worked like a charm – your the man!
Leave a Comment