First of all, i want to give credits for New Blogger's (blogspot.com) recent posts widget using Google's Ajax Feed API to Hecto, i just modified the script to make it open in the same window, work with FeedBurner and a few other minor tweaks.Now we can begin. You can see this New Blogger Recent Posts Widget using Google's Ajax Feed API in the right side of my blog. Move your mouse over it to see how it works.
1. You will need a key from Google which you can get in a second without any registration, by going to this link.
2. Go to your Blogger Dashboard > Layout > Edit HTML, check "Expand Widget Templates" and find: </head> and paste the following code above it
<!-- recent posts ajax -->
<script src='http://www.google.com/jsapi/?key=YOUR KEY' type='text/javascript'/>
<script src='http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js' type='text/javascript'/>
<style type='text/css'>
@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");
#feedControl {
width : 353px;
margin-left : 1px;
background : white;
font-size: 13px;
float:left;
}
.gfg-title {
font-size: 17px;
border-bottom: 1px solid #307396;
font-weight: normal;
color : #BF0000;
background-color: #FFFFFF;
}
.gfg-title a {
color : #005580;
}
.gfg-root {
border: none;
font-family: Verdana,Arial,Helvetica,sans-serif;
background-color : white;
}
.gfg-list {
background-color : white;
}
.gfg-listentry-odd {
background-color : white;
}
.gfg-entry {
background-color : white;
width : 100%;
height : 7.5em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
.gfg-listentry-highlight {
background-image : url('http://nilarimogard.googlepages.com/garrow.gif');
background-repeat: no-repeat;
background-position : center left;
background-color : #F6F6F6;
}
</style>
<script type='text/javascript'>
function load() {
var homeUrl = "<data:blog.homepageUrl/>";
var feed = homeUrl + "atom.xml?redirect=false";
new GFdynamicFeedControl(feed, "feedControl",
{linkTarget : google.feeds.LINK_TARGET_SELF, numResults : 5, title : 'Recent Posts'});
}
google.load("feeds", "1");
google.setOnLoadCallback(load);
</script>
<!-- /recent posts ajax -->
Change YOUR KEY with the key you got in point 1. The bold code above can be changed to suit your needs. numResults : 5 is the number of posts in this widget, change the number to the number of posts you want to show up in your recent posts widget. title : 'Recent Posts' can also be changed with the title you want for your widget, or you can remove title : 'Recent Posts' if you want your feed's default title to be displayed.
3. Create a new "HTML/JavScript" widget, then add this line to the content:
<div id="feedControl">Loading...</div>
Save it and you're done.
Customizing the recent posts Ajax widget
To change the font, colors and so on of your widget, modify the CSS styles:
#feedControl {
width : 353px;
margin-left : 1px;
background : white;
font-size: 13px;
float:left;
}
.gfg-title {
font-size: 17px;
border-bottom: 1px solid #307396;
font-weight: normal;
color : #BF0000;
background-color: #FFFFFF;
}
.gfg-title a {
color : #005580;
}
.gfg-root {
border: none;
font-family: Verdana,Arial,Helvetica,sans-serif;
background-color : white;
}
.gfg-list {
background-color : white;
}
.gfg-listentry-odd {
background-color : white;
}
.gfg-entry {
background-color : white;
width : 100%;
height : 7.5em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
.gfg-listentry-highlight {
background-image : url('http://nilarimogard.googlepages.com/garrow.gif');
background-repeat: no-repeat;
background-position : center left;
background-color : #F6F6F6;
}
To change the red arrow, save this image: http://nilarimogard.googlepages.com/garrow.gif, edit it with the color you want and upload yours to some host, then change it in the above code.
You cand find all the CSS elements for the Google Feed API, here.
For further documentation regarding the Google Feed API, visit it's homepage.
