Recent can get your readers hooked. It is the coolest widget I have seen in a long time. The mouse overs, smooth movements are simply gorgeous. Check out my sidebar!
How to Implement?:
1) Go to this link and get yourself a Google API Key.
2) Go to the Blogger Dashboard > Layout > Edit HTML. Paste this code just before the </head> tag.
<!– 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 –>
3) Replace YOUR KEY with your Google API Key.
Optional Step: The Title and the number of results can also be changed (Bold letters). The CSS (Color etc.) can also be customized to in the code. The arrow can be changed with http://nilarimogard.googlepages.com/garrow.gif.
4) Add a HTML/Java
script widget and add this to it.
<div id=”feedControl”>Loading…</div>
