Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Apr 29, 2007

Digg This Story

Animated Banner with Rotating Headlines

This article is about creating a nice looking banner that incorporates rotating headlines of your 5 recent Blog articles. If you have submitted your Blog to different Blog Directories, you would come across some which ask for your banner. It is nothing more than a picture to represent your Blog.

Nonetheless, a nicely designed banner can attract more visitors and add a touch of professionalism to your Blog. I am not a graphic designer and I believe you can produce much nicer pictures. There are also GIF animator softwares on the net which will help you create a moving image, blinking text, and so on. What I intend to do here is to share with you alternative ideas on how you can create your own unique animated banner.

Look at this example I made for my other blog. Notice how the titles of the 5 recent posts, taken from the site's feed, are rotated in the banner. Instead of a plain image, the headline animation adds life and attracts readers who want to read the details of your articles to click the banner.

Famous Motivational and Inspirational Quotes

This is done through a popular feed aggregator service called Feedburner. If you do not have an account with them, go to their main page, type in your Blog URL and follow their instructions to create a free account. Even if you have subscribed to other feed services like Feedblitz, there is no harm having more service providers publicize your Blog for free.

Once you have successfully created an account, you can browse through their services and tools to pick the ones that you like. Here, we shall talk only about their Headline animator. Go to “Publicize” tab and “Headline Animator” to create a new animated banner.

Tips for New Bloggers

The instructions given by Feedburner are pretty simple to follow. The first thing you need to do is to pick a “theme” which can be their standard black and white backgrounds, or their dynamic and seasonal images. If you merely want to test the outcome, pick any of the schemes. The normal banner size is 468px x 60px and you may want to use this for a start. After that, choose the colors, font size, and position the title, date and headline. Click “Activate” when you are done. They will generate a HTML code for you to copy and paste into your template.

Tips for New Bloggers

While this may give you a banner that contains the headlines of your posts, it does not give you a unique identity. If you have the time, you should try to create your own banner image. For instance, if you have a nice picture that you like, crop it or resize it to 468px x 60px using a photo editing software. If you don't have one, you may try Google's Picasa or search the net for other free softwares. If possible, leave a clear background somewhere for the date and headline. Save the image in the .gif (not .jpg) format. A background image can look like these.

Business Fables and Management Lessons

Business Fables and Management Lessons

The image will have to be uploaded onto an image host. There are a number of free hosts available on the net. You can read about using free hosts like Google Page Creator and Google Groups. We have also a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. After uploading the image file, take note of the image URL.

Go back to Feedburner's “Publicize” tab. This time, under the “Theme” select “Provide your own background”. You will be prompted to enter the “Image URL”. Again, you can adjust the positions of the title, date and headline by dragging them to the desired positions. Click “Activate” once you are satisfied with the layout and obtain the generated HTML code.

Business Fables and Management Lessons

Log in to your Dashboard, go to Template ->Page Elements -> Add a Page Element and choose “HTML/JavaScript”. Copy the generated HTML code, paste and save. If you want to use this banner for publicizing your Blog in blog directories or advertisements, your new animated banner URL is your Feedburner feed address with a .gif extension. If you are still unsure, the banner URL for this site is:-

The portion in red is my feed address. If I enter the above banner URL, I will get this image:-

Tips for New Bloggers

Further reading on applying the banner to your Blog:-

Background image for Blogger Header

Add Picture Banner Link to Blogger Header

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button


Bichara said...

Thank you very much for your for feedburner's animated headlines,I have tried it before but it seems it does'nt show arabic characters properly, it comes out in the form of squares! have an idea about it?

bizwhiz said...

Hello Bichara

I went to Feedburner site and blog, but could find no discussion on the language support. Would you like to drop them an email regarding your query. They will be able to let you know the languages that their service supports.

Paros Shepherd said...

Great post.

Princess Haiku said...

Thanks for the advice but the banner thing is a bit beyond me.

Fortunately, a few directories made their own banners of my space. I have enjoyed several other of your tips though and it's good to read about new things. Gradually, one starts to assimilate them. Or one aspires to! Thanks

Janey Loree said...

You have become my source for Blogger Help! It is great to be able to find so much information in one place. I was wondering if the info in this post is what I need to be able to add animated gif files to my blogs. I created the files in Adobe Photoshop Elements and can't seem to get them working. I want them to be a part of the post, not taking the reader to another tab or window.

Thanks for your help!!!

bizwhiz said...

Hi Janey

I have addressed your query in this article on How animated graphics can be inserted in Blogger. Should be of help.

Janey Loree said...

Perfect! Thanks Bizwhiz!!

H@cKeR said...

i had created the animated banner on feedburner and after i click on activate....i not getting any HTML's juzt showing the banner but how can i get it's HTML code so that i can add on my blog..??
PLZZ help..

my blog;->

bizwhiz said...

Hi H@cKeR

If you can't find it, under "My Original Animator", Feedburner also has a feature to "Add to MySpace, TypePad, etc." Choose the Blogger platform and follow their instructions.

Soufflè Beaumont said...

Thought you might be interested in the new technology of WonderTicker, which uses Blogger's JSON feeds in a scrolling ticker. Fully customizable and supported. Check out

Vanamala said...


Nice & useful information..Thank you very much.

Suffian Ariff said...

Indeed, I have tried that too including the 'Others ( just gimme the code), yet, no codes popping out, nothing new appeared on my blogger page. The top of the page just showed "You have successfully updated the feed "pagename".

Pavel Florian said...

amazing, best
Thank you.

Betty said...

Thanks for your help. Feedburner's animated headlines is good . I ve not yet tried it fully.

Social Bookmarking