How to Have an Animated Header in Blogspot

An animated header can set a blog apart from the billions that exist on the Web.

An animated header is one way to instantly attract a reader's attention to your blog. It sets a blog apart from others by adding an interesting visual element at the very top of the page. Once the animation has been created, it only takes a few tweaks to the Blogger template code to add it to your Blogger blog's home page.

Instructions

Tweaking the Code

1. Log in to the Blogger account and select "Layout" and then "Edit HTML."

2. Find the section of code that reads like this:
   <div id='header-wrapper'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='Azure Haze (Header)' type='Header'/>
   </b:section>
   </div>
   Change the code that says "showaddelement=no" to "showaddelement=yes." This will allow gadgets to be added to the page, which is what the animated header will be considered.

3. Delete the section which reads:
   <b:widget id='Header1' locked='true' title='Azure Haze (Header)' type='Header'/>
   and save the template. This will delete the current header, which Blogger will ask the blogger to confirm. Confirm and save.

4. Go to the "Page Elements" section of the Layout. There will now be an option labeled "Add a Gadget." Select this option, and choose "Picture," to add the animated header.

5. Upload the image which will become the animated header. Use the blog's own URL as the "Link" section and save the work.

Tips & Warnings

• Back up the blog's template before doing anything. If an error occurs, it is best to have the prior layout saved so that broken links and images aren't left behind. Simply copy the code to a Notepad document on the computer and save as a text file.

References

• Dualtranz.com: Setting Up A Flash Header In Blogger