Recent Post Widget for Blogger Using Google API

 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.