Monday, November 9, 2009

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

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?

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.

Did You Like This Post ? Click Like Below To Let Us And Your Friends Know - Thanks !





Jump To Comments

Subscribe To The Rss Feed Or Recieve The Latest Posts By Email

Get The Latest Full Posts By Email - It's Free
Write About Or Link To This Post On Your Blog - Easy Links :
Link Directly To This Post :

Link To The Homepage :
Hey ! People That Read This Post Also Loved These Posts
Still Looking For Something ?
Search This Blog
Custom Search
Important Must Read Before Posting A Comment

In order to keep our comments Do-Follow we have some guidelines you need to follow.
Do not put links in the body of your comment as it will automatically be blocked !
Asking a question ? Make sure to tick the subscribe to comments by email box to be alerted of the reply.
blog comments powered by Disqus
 

Some Money Makers For Your Blog

1. Info Barrel Paid To Write, if you can write a blog you can write for I.B.

1. Xomba Paid To Write, Another great paid to write articles website

3. Chitika Ads For Your Blog, work well alongside AdSense

Thanks For Calling

free counters

Five From The Archive

Who Writes This Stuff ?

Hi Im Paul Crowe,

The Author Of Spice Up Your Blog To Get More Info About Me View My Full About Me Page.

Drop Down Archive

Admin Links