How To Add A Stacked Scrolling Recent Posts Widget To Your Blog

Dear Reader, if you like SUYB's content, feel free to comment on our blog posts.

Read what 'Sharing is Caring' means (and when to do it)

In this post i will show you how to add a stacked animated recent posts widget to your blog using Google Ajax feed API.The widget is easy to add to your blog and can be placed in your sidebars under/over posts or anywere you can add html/javescript gadgets.In a previous post i covered adding a single scrolling recent posts widget to your blog using the same format Click here for that post

Preview

Heres a screenshot of how the widget looks showing my recent posts :



Demo : Click Here To See A Working Demo Of The Widget

Get Your Stacked Recent Posts Gadget

Heres the steps to add the widget to your blog displaying your recent posts :

1.Click 'Layout'->'Edit html' for your blog

2.Click 'Add a gadget'


3.Select 'html/javascript'

4.Paste the following code into the area provided:


<!-- ++Begin Dynamic Feed Wizard Generated Code++ -->
<!--
// Created with a Google AJAX Search and Feed Wizard
// http://code.google.com/apis/ajaxsearch/wizards.html
-->

<!--
// The Following div element will end up holding the actual feed control.
// You can place this anywhere on your page.
-->
<div id="feed-control">
<span style="margin:10px;padding:4px;">Recent Posts Loading...</span>
</div>

<!-- Google Ajax Api
-->
<script src="http://www.google.com/jsapi?key=notsupplied-wizard"
type="text/javascript"></script>

<!-- Dynamic Feed Control and Stylesheet -->
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"
type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");
</style>

<script type="text/javascript">
function LoadDynamicFeedControl() {
var feeds = [
{title: 'Recent Posts - YOUR BLOG TITLE HERE',
url: 'PUT YOUR FEEDBURNER URL HERE'
}];
var options = {
stacked : false,
horizontal : false,
title : ""
}

new GFdynamicFeedControl(feeds, 'feed-control', options);
}
// Load the feeds API and set the onload callback.
google.load('feeds', '1');
google.setOnLoadCallback(LoadDynamicFeedControl);
</script>
<!-- ++End Dynamic Feed Control Wizard Generated Code++ -->

Now you must make the following changes to the code:

1.Were you see 'YOUR BLOG TITLE HERE' in the code above replace with your blog title

Example: Spice Up Your Blog

2.Were you see 'PUT YOUR FEEDBURNER URL HERE' in the code above replace the text with your feedburner URL.

Example: http://feeds2.feedburner.com/spiceupyourblog
(Don't have a feedburner feed? Click here to get one.Its a Google service only takes a few minutes.)

Once you Have made the changes click save and your done !

You can do much more with Google Ajax feed API Click here to go to the Google page.

Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative

If You Enjoyed This Post Please Take 5 Seconds To Share It.