TrickBlogger: Rotating Post Titles Gadget.

This is a smaller version of the Random Rotating Post Gadget. This shows only the post titles linked to their posts in the blog. It has less height and saves more space. It would look good just below the blog header or above the posts column. See picture below :

It shows all post titles in the blog by rotating through them. If you hover the mouse over it the titles will pause rotating. It is also based on Google AJAX code. Here is how to install it......................

INSTALLATION STEPS

1. Login at Blogger.com.

2. Click Layout link on Dashboard under blog title.

3. Click Add Gadget link in sidebar on Layout----->Page Elements tab.

4. Scroll down in popup window and click on Html/Javascript gadget.

5. Copy the code below :

<style type="text/css">
   .gfg-root {
 width : 100%;
 height : auto;
 position : relative;
 overflow : hidden;
 text-align : center;
 font-family: "Arial", sans-serif;
 font-size: 20px;
 border: 1px solid #BCCDF0;
}

.gfg-title {
 font-size: 20px;
 font-weight : bold;
 color : #3366cc;
 background-color: #E5ECF9;
 line-height : 1.0em;
 overflow : hidden;
 white-space : nowrap;
 text-align : center;
 margin-bottom:40px !important;
}

.gfg-title a {
 color : #3366cc;
}

.gfg-subtitle {
 font-size: 20px;
 font-weight : bold;
 color : #3366cc;
 background-color: #E5ECF9;
 line-height : 1.4em;
 overflow : hidden;
 white-space : nowrap;
 margin-bottom : 0px;
}

.gfg-subtitle a {
 color : #3366cc;
 display:none !important;
}

.gfg-entry {
 background-color : white;
 width : 100%;
 height : 6.9em;
 position : relative;
 overflow : hidden;
 text-align : left;
 margin-top : 3px;
}

/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
 position : relative;
 background-color : white;
 width : auto;
 height : 100%;
 padding-left : 20px;
 padding-right : 5px;
}

.gfg-list {
 position : relative;
 overflow : hidden;
 text-align : left;
 margin-bottom : 5px;
 display:none !important;
}

.gfg-listentry {
 line-height : 1.5em;
 overflow : hidden;
 white-space : nowrap;
 text-overflow : ellipsis;
 -o-text-overflow : ellipsis;
 padding-left : 15px;
 padding-right : 5px;
 margin-left : 5px;
 margin-right : 5px;
}

.gfg-listentry-odd {
 background-color : #F6F6F6;
}

.gfg-listentry-even {
}

.gfg-listentry-highlight {
 background-image : url('garrow.gif');
 background-repeat: no-repeat;
 background-position : center left;
}

/*
* FeedControl customizations.
*/

.gfg-root .gfg-entry .gf-result .gf-title {
 font-size: 24px;
 line-height : 1.2em;
 overflow : hidden;
 white-space : nowrap;
 text-overflow : ellipsis;
 -o-text-overflow : ellipsis;
 margin-bottom : 2px;
}

.gfg-root .gfg-entry .gf-result .gf-snippet {
 height : 3.8em;
 color: #000000;
 margin-top : 3px;
}

/*
* Easy way to get horizontal mode, applicable via js options to gadget.
*/

.gfg-horizontal-container {
 position : relative;
 width:600px;
 height:40px;
}

.gfg-horizontal-root {
 height : 1.5em;
 _height : 100%;
 position : relative;
 white-space : nowrap;
 overflow : hidden;
 text-align : center;
 font-family: "Arial", sans-serif;
 font-size: 13px;
 border: 1px solid #AAAAAA;
 padding : 5px;
 margin-right : 80px;
}

.gfg-horizontal-root .gfg-title {
 font-weight : bold;
 background-color: #FFFFFF;
 line-height : 1.5em;
 overflow : hidden;
 white-space : nowrap;
 float : left;
 padding-left : 10px;
 padding-right : 12px;
 border-right: 1px solid #AAAAAA;
}

.gfg-horizontal-root .gfg-title a {
 color : #444444;
 text-decoration : none;
}

.gfg-horizontal-root .gfg-entry {
 width : auto;
 height : 1.5em;
 position : relative;
 overflow : hidden;
 text-align : left;
 margin-top : 0px;
 margin-left : 0px;
 padding-left : 10px;
}

/* To allow correct behavior for overlay */
.gfg-horizontal-root .gfg-entry .gf-result {
 position : relative;
 background-color : white;
 width : 100%;
 height : 100%;
 line-height : 1.5em;
 overflow : hidden;
 white-space : nowrap;
}

.gfg-horizontal-root .gfg-list {
 display : none;
}

/*
* FeedControl customizations.
*/

.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
 display : none;
}

.gfg-horizontal-root .gfg-entry  .gf-result .gf-title {
 color: #0000cc;
 margin-right : 3px;
 float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
 float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
 display : block;
 color: #AAAAAA;
}

.gfg-branding {
 white-space : nowrap;
 overflow : hidden;
 text-align : left;
 position : absolute;
 right : 0px;
 top : 0px;
 width : 80px;
}

.gfg-collapse-open, .gfg-collapse-closed {
 background-repeat : no-repeat;
 background-position : center;
 cursor : pointer;
 float : right;
 width : 17px;
 height : 20px;
}

.gfg-collapse-open {
 background-image : url('arrow_open.gif');
}

.gfg-collapse-closed {
 background-image : url('arrow_close.gif');
}

.gfg-collapse-href {
 float : left;
}

.clearFloat {
 clear : both;
}

   #feedGadget {
     margin-top : 5px;
     margin-left: auto;
     margin-right: auto;
     width : 440px;
     font-size: 16px;
     color: #9CADD0;
   }
#feedGadget2 {
     margin-top : 5px !important;
     float:left;
     width : 440px;
    
     color: #9CADD0;
   }
.feedGadget2 {

}
#big {
width : 440px;
font-size: 10px;
}
</style>
<script src="http://www.google.com/jsapi/?key=PASTE AJAX KEY HERE"
type="text/javascript"></script>
 <script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>

 <script type="text/javascript">

   function showGadget() {
     var feeds = [
      {title:'BLOG_TITLE',
       url:'http://MYBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},
     
      ];

     new GFdynamicFeedControl(feeds, 'feedGadget',
                              {numResults : 1000, horizontal : true,
                              });
   }
   google.load("feeds", "1");
   google.setOnLoadCallback(showGadget);
 </script>
<div id="big">
<div id="feedGadget">Loading...</div>
 <div id="feedgadget2">Gadget by <a href="http://www.blogdoctor.me" target="_blank">The Blog Doctor</a>.</div></div>

6. Paste it in Contents window of the HTML gadget popup window.

7. Change "BLOG_TITLE" to actual title of blog. Also change "MYBLOG" to actual subdomain of your blogspot. Also sign up for an AJAX key for your blog. Then paste the key where it says "PASTE AJAX KEY HERE".

8. Save the HTML gadget.

9. Click on the HTML gadget in the sidebar and drag it to top of posts column.

10. Click Save button at top of sidebar.

View Blog. Wait for page to load fully before gadget starts to operate.

Enjoy!