The Rotating Post Titles with Post Preview gadget lists all your blog posts classified according to labels or categories. Blogger uses Labels to classify posts while WordPress uses Categories for the same. Clicking on a Label or a category in the sidebar of a blog brings up all posts associated with that particular label or category. However, you will see only posts associated with that one label. In this gadget post titles are grouped under their respective labels. In this gadget in one look you can see all the post titles in that blog and all the labels in it. Thus you get a full summary of the blog. Hovering on a post title shows the Post Preview in the top pane. You can then click on it to go to that post to read it in full detail.

What is Google AJAX feed API?

AJAX (shorthand for asynchronous JavaScript and XML) is a web development technique which retrieves data from the server asynchronously in the background without interfering with the display, and behaviour of the existing page. The whole page is not refreshed when data is retrieved. Only that section of the page which is a part of the gadget shows the data brought. With the Google AJAX Feed API, you can retrieve feeds and mash them up using Javascript. In this gadget, we will retrieve the post titles from the label feeds and display them using Javascript code. See picture below:

This gadget shows list of posts grouped by label from my blog http://www.blogdoctor.me. Four post titles from three labels are shown but the code can be modified to show all posts from all labels (categories). This label is also shown as Gadget No 4 in My Gadget Showcase blog. The cursor autoscrolls down the post titles, and each post preview is shown at the top as an excerpt for five seconds before moving on to the next post.

Obtaining the Google AJAX API Key

The first step in installing the above gadget is to get the Google AJAX API Key. It is free and you can easily obtain it for any site blog or page by signing up for the key at the API key signup page.

Type in your blog address in the My web site URL text box and click the “Generate API Key” button. On the resulting page copy the key and paste it in code below as shown.

Customizing the code

In the code below replace PASTE AJAX API KEY HERE with your actual key obtained above.

<!-- ++Begin Dynamic Feed Wizard Generated Code++ -->
<!--    // Created with a Google AJAX Search and Feed Wizard    
       // http://code.google.com/apis/ajaxsearch/wizards.html    -->      
<!--    // The Following div element will end up holding the actual feed control.    
        // You can place this anywhere on your page.    -->
<div id="content">
    <span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
  </div>
<!-- Google Ajax Api    -->    
<script src="http://www.google.com/jsapi?key=PASTE AJAX API KEY HERE"      
       type="text/javascript"></script>  
<!-- Dynamic Feed Control and Stylesheet -->  
  <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">
   google.load('feeds', '1');
     function OnLoad() {
      var feeds = [
        {
          title: 'LABEL_1',
          url: 'http://MYBLOG.blogspot.com/feeds/posts/default/-/LABEL1?max-results=100'
        },
        {
          title: 'LABEL_2',
          url: 'http://MYBLOG.blogspot.com/feeds/posts/default/-/LABEL2?max-results=100'
        },
        {
          title: 'LABEL_3',
          url: 'http://MYBLOG.blogspot.com/feeds/posts/default/-/LABEL3?max-results=100'
        }
      ];
    var options = {
        stacked : true,
        horizontal : false,
        title : "Posts from BLOG_TITLE"
      };
    
      new GFdynamicFeedControl(feeds, 'content', options);
      document.getElementById('content').style.width = "200px";
    }
    google.setOnLoadCallback(OnLoad);
    </script>

In the above code replace LABEL_1, LABEL_2 and LABEL_3 and LABEL1, LABEL2 and LABEL3 by respective Label Names and BLOG_TITLE by the actual title of your blog. Also replace MYBLOG by actual blog subdomain. This is for blogspot blogs only. For WordPress blog you will have to replace the label feeds::

http://MYBLOG.blogspot.com/feeds/posts/default/-/LABEL1?max-results=100

http://MYBLOG.blogspot.com/feeds/posts/default/-/LABEL2?max-results=100

http://MYBLOG.blogspot.com/feeds/posts/default/-/LABEL3?max-results=100

by the Category feed URLs from WordPress blog.

After customizing the above code in Blogger paste it in a HTML gadget while in WordPress paste it in a Text widget.

Further Customization

To show more than four posts per label or category, you will have to modify the following Javascript code file:

http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js

In the above mentioned Javascript code file, alter the following code line in it :

GFdynamicFeedControl.DEFAULT_NUM_RESULTS = 4;

Change ‘4‘ to ‘1000‘ and save the file as a MODgfdynamicfeedcontrol.js file in a text editor like Notepad. Upload the file to a free host and replace the link of the file in the above code.

To change the styling of the gadget, you will have to modify the following file:

http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css

Then save the modified file and upload it to a free host and replace its link in the above code.

Working Example

Summary

The Rotating Post Titles with Post Preview gadget provides an at-a glance summary of your blog. All the posts are grouped by label or category and are linked to their post pages. The constantly rotating post excerpts at the top draws the attention of the reader and gets him/her more involved and eager to explore your blog. This increases the traffic and decreases the bounce rate of visitors from your blog.nara