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




| 2 comments

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

How to get a scrolling recent posts widget for your blog.

Preview

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

 Google Ajax feed api as a recent posts gadget


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?

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.


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.

2 comments:



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us