.

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.

Recent Post widget for blogger Using Google API

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!

COMMENTS

BLOGGER: 18
Loading...
Hosted by HostGator
Name

Adsense Adsense hacks Advertising Affiliate Marketing Announcement Antivirus Application hacks Applications Backlinks Blog Blogger Blogger Features Blogger Help Blogger Roll Blogger Templates Blogger Widgets Blogging Bluetooth hack Bootable Browsers Business Cell phones Contest Cool tricks CSS Device Download Email Marketing Entertainment Facebook FeedBurner FIFA World CUP Files n Folders Flash Free software Fun with Windows Games Gmail hacks Google Google hacks Google Plus Graphic Hacking tools Hosting How to HTML Info Internet Tips ip address iphone hack Ipod hacks Javascript Keyword Research Make Money Blogging Make money online Mobiles Monetize Nokia hacking Page Rank Password Hacks PC Games PC Hacks Photoshop Promote site Reviews SEO Social Bookmarking Social Media Symbian hack Tips n Tricks Traffic Tutorials USB Virus Web 2.0 Web design Widget Windows Tricks WordPress WordPress Themes
false
ltr
item
Hack Tutors — Blogger Tricks, Blogging and Social Media Tips: Recent Post Widget for Blogger Using Google API
Recent Post Widget for Blogger Using Google API
http://1.bp.blogspot.com/_b0xJ7qk6DTc/TIogB9ClilI/AAAAAAAABDc/47uzqzl6Htg/s1600/recent-post-widget-for-blogger-google-api.png
http://1.bp.blogspot.com/_b0xJ7qk6DTc/TIogB9ClilI/AAAAAAAABDc/47uzqzl6Htg/s72-c/recent-post-widget-for-blogger-google-api.png
Hack Tutors — Blogger Tricks, Blogging and Social Media Tips
http://www.hacktutors.info/2010/09/recent-post-widget-for-blogger-using.html
http://www.hacktutors.info/
http://www.hacktutors.info/
http://www.hacktutors.info/2010/09/recent-post-widget-for-blogger-using.html
true
7369343002377078183
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy