107 How to create a custom header in Blogger June 17, 2007 /

My blog template is based on the Denim theme, but since I didn't particularly like the header, I replaced it with my own graphic, along with a link back to my site. Want to know how? Read on!

First, you'll need to create your new blog header using your favorite image creation software (eg: Paint, CorelDraw, Gimp, Photoshop...). Take a look in your blog template HTML and make a note of the width of your blog header; you'll probably want your new blog header to be this width too! Don't worry about the height: it can be as tall or as short as you want.

Once you've made your new blog header, you'll need to tinker with the HTML of your template a little bit. Make sure you backup your existing template before doing anything more, just in case something goes wrong and you need to pout your current template back in place instead. Then look for the following section of code:

<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Header (Header)' type='Header'/> </b:section> </div>

The elements highlighted in bold need to be changed. So:

• Change maxwidgets='1' to at least 2 in order to be able to add another element in the header section.
• Alter showaddelement='no' to showaddelement='yes' to be able to add a different element to the header section (your new image)
• Replace locked='true' with locked='false' so that you can later remove the old header.

Now save your template, and go back to the layouts section in your dashboard. You'll notice that you can now add another element to your blog header!

If you only want to add your new blog header, and don't want to have this linked to your home page, you can easily do this by choosing to add a "Picture" element to your blog and uploading your new header.

However, if you prefer to link your header to your homepage (as in the default Blogger templates), you'll need to do a little more work first. Upload your image to a remote site (there are many free hosting accounts available, such as FreeImageHosting.net) and make a note of the full address of your file, including the extension (eg: www.yoursite.com/images/yourimage.jpg). Then, choose to add a "HTML/Javascript element and add the following:

<img src="http://www.yoursite.com/images/yourimage.jpg">

Replacing the image source with your own image address of course! This is the code needed to display your new blog header. Now to make this image become a link back to your blog's home page, you would need to add link tags as follows:

<a href="http://yourblogaddress.blogspot.com"><img src="http://www.yoursite.com/images/yourimage.jpg"></a>

Save this element and view your blog. You should see both the original blog header and your new blog header. Make sure your new blog header looks the way you want it to, then go back to edit the layout.

This time, click on the "header" element (the original blog header), and choose "remove page element". Once you do this, the original header will be completely removed, leaving only your customised one (a good reason to have saved a backup of your template, just in case!).

And there you go: your very own customised blog header! Enjoy!

Technorati Tags: custom+blog+header blogger blog+template html+code header imaging