Ajax Blog List Gadget with Post Preview. ~ The Blog Doctor.
Loading...

Ajax Blog List Gadget with Post Preview.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

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'
}];



4 comments:

Tammy Snyder said...

Hello Vin,
I copied and pasted but it says the Feeds not working. Also, does it have to say it came from Blogger for dummies right there? I might get some raised eyebrows?
I also really would prefer to have my TOC in the menu under the header as you can see when you look I have already titled it. Is there any possible way to put my list there AND have it go to other pages like the RECIPE. Now it isn't clickable but I would like it to go to the Recipe page. Do you have a way for that?
Thank you,
Tammy

Vin said...

Tammy Snyder,

You have not modified the code :

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

Replace the CAPS in above code 'BLOG_1' and 'BLOG1_TITLE'. It is customary to give credit to authors of templates and widgets in return for the work they put in. You may remove it is that is not your inclination.

child behaviour problems said...

Dear Vin,
Thanks for your stuff and tips for bloggers, I got a lot from your pages and would be visiting it on continuously.

Thanks.

child behaviour problems

Steve said...

can you please post some more info what this gadget is about i have a wordpress blog can i use it on that blog thanks.

CLICK TO LEAVE A COMMENT..... :-)



Skip to top of post.

Search Blog Before Commenting

Loading...

Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,

Vin.

The Blog Doctor The Blog Doctor2 Blog Doctor Home

SUGGESTED READING

Tips On Blogger and Latest News.



Skip to top of post.