Create a unique headline animator from Feedburner using jQuery

Posted by in Articles, Internet

Feedburner is one of the leading feed providers, now powered by Google. Unlike other feeding tools, feed burner provides large options to tweak your feeds post.By default, feedburner supports a beautiful Headline Animator which rotates through your latest posts in your feeds. If you have ever tried and played with headline animator, then you might have noticed that whenever you click in one of the post title, you’ll be redirected to the feeds home page instead of redirecting to the original post in your blog.

Alternative to this, Feedburner also provides BuzzBoost, which in real shows the list of your latest post with short excerpt.

The title can be linked directly to your post rather than the feed homepage.

Now we’ll use the power of jQuery over BuzzBoost.

First of all look how the BuzzBoost initially looks when you first add it to your blog.

If you don’t know how to add BuzzBoost, then read the tutorial here.

Install BuzzBoost widget in any part of your website.

Now we’ll need to add jqeury effect to it.

Recently, I’ve posted a tutorial about world’s smallest jQuery based slideshow in my blog. I’ll be using same technique to animate the BuzzBoost.

See Today’s Headline BuzzBost Demo here how it looks when you are done.

Let’s see how we can apply this jQuery in BuzzBoost.

Copy the code shown below and paste it just above the code of BuzzBoost Code snippet.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script>
var x = 2;
function slideSwitch() {
var max=5
x += 1;
if (x > max) {
x = 1
}
$(".feedburnerFeedBlock ul li:nth-child(n)").animate({opacity:0});
$(".feedburnerFeedBlock ul li:nth-child(" + (x) + ")").animate({opacity:1});
}
$(document).ready(function() {
setInterval( "slideSwitch()", 5000 );
});
</script>
<style>
.feedburnerFeedBlock ul {
height: 30px;
margin:0;
padding:0;
color:#000;
position:relative;
}
.feedburnerFeedBlock {
height:30px;
overflow:hidden;
}
.feedburnerFeedBlock ul li {
text-align:left;
position:absolute;
top:0;
left:0;
height:30px;
width:320px;
margin:0;
padding:0;
background:#ffe8aa;
color:#000;
font-weight:bold;
}
</style>

You’ll need to edit the code if you have more than five posts in BuzzBoost. Well, its not a hard job to tweak it.

Here is how you do it.

If you have like 10 posts then, search for var max, in place of value 5 put 10.

Remember that the number of posts should match the value otherwise browser will render some white spaces for few seconds.

You are all done with the jQuery based Headline Animater with the help of BuzzBoost.

Hope you loved it. Subscribe to our blog for more interesting articles.