35 Get a free animated header for your blog

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: | | | | |

Author: Amanda Kennedy

Amanda is a professional blogger and web designer living in Sheffield, United Kingdom.

In addition to curating Blogger Buster, you can find Amanda on Twitter, Facebook or add her to your circle on Google+.

Like to share?

You may also like to subscribe to Blogger Buster's RSS feed or receive free email updates of our latest posts.

35 comments:

  1. Worked like a charm! Now how do I get rid of that annoying "tools" imag?

    ReplyDelete
  2. I created my own animated header and then followed your instructions for adding it to my blog. Everything worked, except I can't figure out how to get rid of the original Header. In my Layout there is no "Delete Page Element" option that I see. Any suggestions?

    ReplyDelete
    Replies
    1. simple go to html of ur blog and the locked='true' to locked='false' of the header part

      Delete
  3. In blogspot there will be remove page element option.

    If you have any idea to place an blog banner you can place it.

    http://add-blogbanner.blogspot.com

    ReplyDelete
  4. great post
    check my blog as well
    http://iphone3fever.blogspot.com

    ReplyDelete
  5. i like it....
    blogcumulus...
    you're very smart.....thanks you...
    my name dian from indonesia...
    ..because of you,in my blog had blogcumulus......
    please check my blog as well..

    http://dian-mardiana74.blogspot.com/

    ReplyDelete
  6. Thank you for sharing this trick, I'll try it :))

    ReplyDelete
  7. I like your tricks,
    I hope u will sharing more new tricks to help young blogger like me :))
    Thanks

    ReplyDelete
  8. Wew..great tricks,thanks

    ReplyDelete
  9. nice post...check my blog as well...http://sujeethad.blogspot.com

    ReplyDelete
  10. http://www.myinternet2011.blogspot.com/

    ReplyDelete
  11. I am thoroughly convinced in this said post. I am currently searching for ways in which I could enhance my knowledge in this said topic you have posted here. It does help me a lot knowing that you have shared this information here freely. I love the way the people here interact and shared their opinions too. I would love to track your future posts pertaining to the said topic we are able to read.

    ReplyDelete
  12. Thanks for taking the time to discuss this, I feel strongly about information and love learning more on this. If possible, as you gain expertise, It is extremely helpful for me. would you mind updating your blog with more information

    ReplyDelete
  13. nice and usefull info, i can made my own animation easier now :)

    ReplyDelete
  14. thanks for this article guys :))

    ReplyDelete
  15. Fotoclipping Nice Shearing... Its very helpful. carry on

    ReplyDelete
  16. www.mhzisc.com

    ReplyDelete
  17. Thanks to share with us the information. I wish you good luck!

    ReplyDelete
  18. hmm this site is really awesome and informative to me, i am also gonna share this site to my friends.

    ReplyDelete
  19. nice
    visit it
    http://sportsbing.blogspot.com/

    ReplyDelete
  20. From what I can tell, the way to customize the appearance is to add the class prefix ".mobile " to additional style statements in order to customize the appearance in mobile browsers. Not had time to try it much yet, but will do my best over the holidays so I can write up a post.

    sex video
    asian sex tube
    free teen
    latin sex porn
    secret porn
    cute porn
    sexy teen
    cd porn
    hot porn tube
    sex video
    fac sex
    sex movies
    xxx videos
    teen sex
    porn movies
    porn videos
    search porn tube
    redtube
    red tube
    xnxx
    porno
    lesben porno

    ReplyDelete
  21. Nice Info

    http://www.way2bloggertemplates.com

    ReplyDelete
  22. amanda why you are that much cute

    ReplyDelete
  23. Wideo is a service that allows anyone to create animated videos and Common Craft-style videos online.
    homepage videos

    ReplyDelete
  24. YES! I finally found this web page! I’ve been looking just for this article for so long!!
    web development dubai
    dubai web design

    ReplyDelete
  25. Fabulous article writing. Your article delivers varied passion therefore I bookmarked this science system for future visit that i hope can get a current content from your post and every one content unit progressing to be pleasant to scan with some new things.
    web development dubai
    dubai web design

    ReplyDelete
  26. Can i add like a slideshow type thing instead of animation to the header? I am not well versed with the whole html thing so please use layman language.

    ReplyDelete

Great! You've decided to leave a comment! Please bear in mind that comments are often moderated and that rel="nofollow" is in use and spammy comments will be deleted. Let's have a meaningful conversation instead. Thanks for stopping by!

Advertise on Blogger Buster

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

Blog Archive

© Blogger Buster 2010 Home | About | Contact | Hire Me | Privacy Policy