23 Get a free animated header for your blog July 04, 2007 /

Would you like an animated header for your blog like the one below?

Using the free service over at FlamingText.com, you can easily create an animated header in a variety of styles, sizes colours and fonts. You can also find glittery headings like this:

Just visit "headings" page and scroll down a little to see the animated design menu on the right of the screen (watch out for those pesky pop-ups though!).

Choose your style, font and colour scheme and click "generate" to be forwarded to your completed header. It usually takes up to 15 seconds for the page to load, so try to be patient. Once your header is on the screen, right click on the image to save it to your computer.

Unfortunately, if you upload your animation to the header widget in layouts, the image will be static. In order for your animated header to display properly in your blog, you'll need to upload it to a different server and link to it using HTML code. Photobucket and ImageShack both offer free hosting for images. Once you've uploaded your animated header, make a note of the exact web location as you'll need this shortly.

Now, you'll need to edit your blog template in order to create a new widget to replace your original blog header. Here's what you should do:

1. Go to Template>Edit HTML. Make a backup of your template before modifying anything just in case something goes wrong. Then tick the "expand widget templates" box.
2. Find the section in your blog template which begins with <div id="header-wrapper">. You'll see the following code just below:

   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

   Change the maxwidgets to any number greater than 1, and alter the "showaddelement" to say "yes".
3. Save your template, and go to Template>Layout. You will notice that you can now add a page element to the header.
4. Add an HTML/Javascript element to the header section, and substitute the web address for the location of your animated header: <center><img src=http://www.imagehost.com/yourimage.gif"/></center> The <center> tags are there to ensure your header remains centralised in the layout. You can omit them if you prefer the header to float to the left.
5. Preview your blog to ensure the header looks as you would like it to. You'll see the original header is still in place.
6. If your new header suits your taste, you can then delete the original header, leaving only your new animated header in place. To do this, click on the header element and choose "delete page element".
7. Now all you have to do is enjoy your new blog header!

For more information about customising your blog header, take a look at this post which gives different options for customisation.

If you know of any other good sites for generating free animated headings, please leave your comments and a link below.

Technorati Tags: animated | header | heading | flash+header | blogger | template