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
Here’s a screenshot of how the widget looks showing my recent posts :
![stackedwidgetpreview](https://www.spiceupyourblog.com/wp-content/uploads/2024/02/stackedwidgetpreview.jpg)
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’
![ChitikaAdSetupGoogleBloggerClickAdd](https://www.spiceupyourblog.com/wp-content/uploads/2024/02/ChitikaAdSetupGoogleBloggerClickAdd.png)
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.