How to add a scrolling recent posts widget to your blog.

In this post i cover using Google Ajax feed API as a recent posts gadget for your blog.The widget can be added anywhere on your blog and will scroll trough your most recent posts.You can also add a Stacked version of this widget click here to see how

Preview

Here's a screenshot of the widget if your still not sure which one I'm talking about :

Get This Gadget

To add this gadget to your blog follow these steps :

1.copy the code below :

<!-- ++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;">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',
url: 'PUT YOUR FEED URL HERE'
},
{title: 'Recent Posts',
url: 'PUT YOUR FEED URL HERE'
}];
var options = {
stacked : false,
horizontal : true,
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++ -->


2.In the 'Layout' section of your blog click add a gadget and paste the code into the space provided.

3.You now Must make two changes to the code for it to display your recent posts :

1.You can see : 'PUT YOUR FEED URL HERE' twice in the code - replace with your feed URL.

Example :http://feeds.feedburner.com/spiceupyourblog

Don't have a feed for your blog?

We Are Nearly Finished - First A Quick Reminder: If you need more help or have an opinion or suggestion Please leave a comment Below. It also really helps me with future posts if you let me know if a tip has worked on your blog. This is a Do-Follow Blog so leaving a comment will also help Your blogs Google rank. OK Back to business....

Click here to see how to get a feed

Once you have made the changes click save and your finished !

There are a few different versions of this widget i will be covering in future posts.

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

Stay Connected With Free Updates

Subscribe via Email