Recent Post widget using Google API (Ajax)

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=’ KEY’ type=’text/javascript’/>
<script src=’’ type=’text/javascript’/>
<style type=’text/css’>
@import url(&quot;;);
#feedControl {
width : 353px;
margin-left : 1px;
background : white;
font-size: 13px;
.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(&#39;;);
background-repeat: no-repeat;
background-position : center left;
background-color : #F6F6F6;
<script type=’text/javascript’>
function load() {
var homeUrl = &quot;<data:blog.homepageUrl/>&quot;;
var feed = homeUrl + &quot;atom.xml?redirect=false&quot;;
new GFdynamicFeedControl(feed, &quot;feedControl&quot;,
{linkTarget : google.feeds.LINK_TARGET_SELF, numResults : 5, title : &#39;Recent Posts&#39;});
google.load(&quot;feeds&quot;, &quot;1&quot;);
<!– /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

4) Add a HTML/Java

script widget and add this to it.

<div id=”feedControl”>Loading…</div>


Technorati Tags: ,,,

So lazy that he can't even fill this column out.

© 2009 Suhas Tech. All rights reserved.
Proudly powered by Wordpress.