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

Posted : Wednesday, November 25, 2009 | Post Author : Paul Crowe | 4 comments

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


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

Recent Posts Widget

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’
add a gadget blogger

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

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

<!– Google Ajax Api
<script src=””

<!– Dynamic Feed Control and Stylesheet –>
<script src=””
<style type=”text/css”>
@import url(“”);

<script type=”text/javascript”>
function LoadDynamicFeedControl() {
var feeds = [
{title: ‘Recent Posts – YOUR BLOG TITLE 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’);
<!– ++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.

(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.


  1. I inserted the code as you instructed, but it only displayed “recent post loading”. I Don’t know what else to do. Can you figure out why its not working in my blog.


  2. mypress-release.bizFebruary 21, 2012 at 6:20 PM

    Wow! It`s cool! But I insert in – ‘PUT YOUR FEEDBURNER URL HERE’ – my rss, works great!


  3. mypress-release.bizMarch 1, 2012 at 10:34 PM

    I insert in code my rss not FEEDBURNER URL, and it`s working! Thank you!


  4. mypress-release.bizMarch 1, 2012 at 11:23 PM

    Why display only last 4 news? How can I get more?