Recent Post Widget for Blogger Using Google API

Earlier, I posted about how to add Recent Post Widget for Blogger using Feedburner. FeedBurner widget load quite faster than other, even I am using that Feedburner Recent Post widget for my blog.

Now again, we'll learn to add the Recent Post Widget for Blogger by using Google API. This widget is much smarter than before's. I guess you'll surely love it after viewing the demo (See below).

Loading...

Thats the Recent Post Widget what you seen above. It is just like the featured content and have a stylish looks.

Lets see what have been added to this new recent post widget:

Features

- Google API code used
- Layout of featured content
- Automatic sliding and a short summary on the top
- Professional Looks
- Hover effects

In fact, this is a new Recent Post widget which is based on Google API codes.

Implementation on your Blog

To add this widget on your blog, simply follow the following steps:

Log on to your Blogger account and go to Design > Page Element > Add a Gadget > HTML/JavaScript.

Add the following code:

<div id="feed-control">
    <span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
  </div>

  <script src="http://www.google.com/jsapi?key=notsupplied-wizard"
    type="text/javascript"></script>
  
  <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: 'YOUR BLOG TITLE',
url: 'http://yourblog.com/rss.xml'
},
];
      var options = {
        stacked : true,
        horizontal : false,
        title : "Popular Posts"
      }

      new GFdynamicFeedControl(feeds, 'feed-control', options);
    }

    google.load('feeds', '1');
    google.setOnLoadCallback(LoadDynamicFeedControl);
  </script>
<a href="http://www.hacktutors.info">Get this Widget</a>

Replace YOUR BLOG TITLE with your blog name and http://yourblog.com/ with your blog URL. No need to give a title to your widget because there is already a title named "Popular Post" in default.

Save the widget and view your blog how it looks like.

This widget loading power is slow as comparison to Feedburner recent post widget. However while loading this widget, it display the small text "Loading...". It enhance the widget visibility.

Have you added this widget on your blog? Let us view it!