Ajax Blog List Gadget with Post Preview.

Last week Blogger enabled Google Gadgets for Layout Blogs. You can now add a Google Gadget directly by login at Blogger.com, click Layout link on Dashboard and click 'Add a Gadget' link. This replaces the 'Add a Page Element' link.

The first gadget on the Basics subtab in the popup window is the Blog List gadget. This gadget shows off what you read with a blogroll of your favorite blogs. It shows the latest post title on the blog linked to the post with a post snippet and the date of last update. Since many have reported this gadget to malfunction here is the much better Ajax Blog List Gadget : (See picture below)



As you can see it can be customized to show ANY NUMBER of posts from any public blog. The top pane shows a post preview which cycles through all the posts listed below continuously. The time period and the styling of the widget can also be customized. To install it in your blog..............


login at Blogger.com and click Layout link on Dashboard. On Page Elements subtab of Layouts tab click the 'Add a Gadget' link. In popup window scroll down and click the Html/Javascript option. In it paste the following code under contents :

<!-- ++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="feed-control">
<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=notsupplied-wizard"
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">

/* Root */

.gfg-root {
width : 80%;
height : auto;
position : relative;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 20px;
border: 5px solid #BCCDF0;
}

/* Feed Title */

.gfg-title {
font-size: 35px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
}

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

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

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

.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;
}

.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('http://www.google.com/uds/solutions/dynamicfeed/garrow.gif');
background-repeat: no-repeat;
background-position : center left;
}

/*
* FeedControl customizations.
*/

.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 25px;
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;
}

.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;
}


</style>

<script type="text/javascript">
function LoadDynamicFeedControl() {
var feeds = [
{title: 'BLOG1_TITLE',
url: 'http://BLOG_1.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=5'
},
{title: 'BLOG2_TITLE',
url: 'http://BLOG_2.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=5'
},
{title: 'BLOG3_TITLE',
url: 'http://BLOG_3.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=5'
},
{title: 'BLOG4_TITLE',
url: 'http://BLOG_4.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=5'
}];
var options = {
stacked : true,
horizontal : false,
title : "MY BLOGS"
}

new GFdynamicFeedControl(feeds, 'feed-control', options);
}
// Load the feeds API and set the onload callback.
google.load('feeds', '1');
google.setOnLoadCallback(LoadDynamicFeedControl);
</script>
Widget by <a href="http://betabloggerfordummies.blogspot.com">Betabloggerfordummies.</a>
<!-- ++End Dynamic Feed Control Wizard Generated Code++ -->


In above code replace BLOG1_TITLE, BLOG2_TITLE,....with the respective blog titles. Also replace BLOG_1, BLOG_2,.. with respective blog names. If you wish to show more posts then replace the last number '5' in these lines :

http://BLOG_4.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=5

with the number of posts you wish to show. Save gadget. Here is what mine looks like :

To change the styling of the above gadget

apply the css parameter lines to this code in it :

/* Root */
.gfg-root

/* Feed Title */
.gfg-title

/* Entry Section - Note the contents are generated from the
FeedControl, see documentation or the css here to style.
*/
.gfg-entry

/* Feed List */
.gfg-list

/* List Entries, support highlighting, and odd and even behaviors */
.gfg-listentry
.gfg-listentry-highlight
.gfg-listentry-odd
.gfg-listentry-even


Save gadget.

If you want to add more blogs to the list

add as many code blocks like this one as you want :

{title: 'BLOG5_TITLE',
url: 'http://BLOG_5.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=5'
},

in the following code block in the whole code :

var feeds = [
{title: 'BLOG1_TITLE',
url: 'http://BLOG_1.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=5'
},
{title: 'BLOG2_TITLE',
url: 'http://BLOG_2.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=5'
},
{title: 'BLOG3_TITLE',
url: 'http://BLOG_3.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=5'
},
{title: 'BLOG4_TITLE',
url: 'http://BLOG_4.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=5'
}];

Source: http://www.blogdoctor.me/2008/08/ajax-blog-list-gadget-with-post-preview.html