Random Rotating Post Gadget with Excerpt. ~ The Blog Doctor.
Loading...

Random Rotating Post Gadget with Excerpt.

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

If you have a blog with more than 20 posts than this gadget is just the thing your blog needs :



Click on above picture to enlarge it. You can see it above the posts column in this blog when the page is completely loaded. Features :

  • 1. Shows one post title at a time.
  • 2. Links to the post.
  • 3. Shows post excerpt also.
  • 4. Every 5 seconds shows a new post.
  • 5. Cycles through all the posts in the blog.
  • 6. Starts a new cycle at the end of the list.
  • 7. Once loaded continues cycling even when not connected to the Internet.
  • 8. Uses official Google AJAX technology.
  • 9. Can be used on other blogging platforms (not tested).
  • 10. Hovering with mouse cursor over the post title halts the rotation till mouse moves off the gadget.
............................................



Bloggers with plenty of posts in their blogs face a major problem in showing all of them to the viewers. Some solve this by changing the settings to show all the posts in Main Page. This slows down the loading speed of the blog and can turn away visitors.



The Blog Archive gadget which comes as a default with the standard Blogger Layouts shows only the posts in the blog for the present month. The rest of the posts are hidden and can be seen only by clicking the black arrows to expand the archives. This saves the real estate on the blog page but to the new visitor hides the previous months blog posts.



One can eliminate the dates in the Blog Archive and show all your posts in a blogger gadget but this makes a very long sidebar and if you have posts with little content this may make the blog seem lopsided.



To save space and yet show all posts one by one this gadget uses official Google AJAX API Feed technology and the Dynamic Feed Control. It fetches the post titles and data from your blog and displays it in the gadget. To install this on your blog :

1. Login at Blogger.com.
2. Click Layouts link on Dashboard.
3. Click Add Gadget link in sidebar on Page Elements subtab of Layout tab.
4. In popup window scroll down and click Html/Javascript gadget.
5. In Contents window copy the code below and paste after modifying it :

<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: 24px;
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: 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;
}

.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;
}
body {
background-color: white;
color: black;
font-family: Arial;
font-size: small;
margin: 0;
}
#feedGadget {
margin-top : 5px;
margin-left: auto;
margin-right: auto;
width : 440px;
font-size: 16px;
color: #9CADD0;
}
</style>
<script src="http://www.google.com/jsapi/?key=PUT_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:'title',
url:'http://MYBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},

];

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



In the above code make changes in the following parts :


 <script type="text/javascript">

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

];

new GFdynamicFeedControl(feeds, 'feedGadget',
{numResults : 1000, stacked : true,
title: "BLOG_TITLE ~ Random Posts."});
}


Change "MYBLOG" to actual blog subdomain and "BLOG_TITLE" to actual title of your blog. Then paste the modified code in the Html gadget and save the gadget.


Get your AJAX API key and put it in above code instead of 'PUT_AJAX_KEY_HERE'.


Lastly click and drag the HTML gadget from the sidebar to above the posts column. See picture below.



This is because the width of the gadget is more suited for the posts column than the sidebar. Save the Layout. View Blog.


If you do not want to save space you can show the whole Table of Contents with post preview.


33 comments:

Usiku (oo-SEE-koo) said...

Thanks, just what I need. Is there a way to remove by name and the date of the post in this gadget?

Vin said...

Usiku (oo-SEE-koo),

You will need to create a Yahoo Pipe from your blog feed and filter out the name and date options.

Then take the RSS feed from this Pipe and paste it in the above code.

Our Family said...

This is great, but is there a way that this box doesn't change the background color of my original color?

Vin said...

Our Family,

Delete this part of the code in the HTML gadget :

body {
background-color: white;
color: black;
font-family: Arial;
font-size: small;
margin: 0;
}

Our Family said...

Thank you Vin! This is awesome!

aggywanda said...

I haven't got the slightest idea of html and I gave it a go on one of my blogs. I even customized the colors of the thing so it would blend with my background image. IT worked pretty fine with the simple instructions I found here.

I used it just to see if I could do it but found it distracting from the blog's content so I took it off.

autoshowevents said...

This is pretty sweet. I've modified the script to suit my site, and placed it below my site header. Now there's a large white space between the feed and the body.

I changed the margin-top to 0 but I still have a large white space below the feed.

}
#feedGadget {
margin-top : 0px;
margin-left: auto;
margin-right: auto;
width : 900px;
font-size: 10px;
}

Any suggestions?

Thanks!

Vin said...

autoshowevents,

What is your blog address?

Kari said...

it worked it worked! how fun.

jeisea said...

Hi Vin
Once again you've solved a problem for me. I saw this gadget on Usiku's website. Much appreciated.
jeisea

Vin said...

Test Comment

Outside the Box Thinker said...

if i have more than one blog site can i put more than one in the random rotating banner, and if so how? Thanks.

Vin said...

Outside the Box Thinker,

Have a look at My Blogs gadget on My Gadgets Showcase Blog.

Scott Simmonds said...

How can I get rid of the author's name and post date?

Thanks

Vin said...

Scott Simmonds,

Add the following code :

.gf-relativePublishedDate {
display:none !important;
}
.gf-author {
display:none !important;
}
.gf-spacer {
display:none !important;
}

just above </style> tag in the gadget code shown in above post.

Angelo said...

Is there way to get truly random results. It just scrolls from the newest to oldest post in order. And it only cycles through the posts shown at my feed URL.

I'm using feedburner so that may be the issue.

Vin said...

Angelo,

To get random results would require some deep hacking of the javascript behind the gadget.

Because your feed url is added in the code it fetches only those posts.

Anonymous said...

Great tool!! My Problem is, the widget is cutting off my post titles??

Any clue how to fix this?

Thank you

Vin said...

Anonymous,

Until I see it I cannot see the solution.

Crystal from KIZZ said...

Hi Vin. Did everything you said but it just shows as loading. http://www.kizzdesigns.blogspot.com

Yeh! Vin
Crystal

Vin said...

Crystal from KIZZ,

Go to Settings--->Site Feed---->Post Feed Redirect URL box and delete what is entered in the box. Leave the box empty and save settings.

Your feed is not working as it has been redirected to itself causing an infinite loop.

Crystal from KIZZ said...

Hi Vin, thanx again for your help.
I am trying to tweek the code to make font smaller, change font color and to make the background from white to the same as my blog. learning..nay need help later...but the gadget on whole is too wide for the center of my blog. How can I make the width smaller so it fits better..
http://kizzdesigns.blogspot.com Where is the numbers to change for that.

Yeh Vin!

Vin said...

Crystal from KIZZ,

You have to change the top part of the CSS code. I don't see widget in your blog? For width change :

.gfg-root {
width : 100%;
...
}

TO :

.gfg-root {
width : 200px;
...
}

Adjust '200' to fit your column.

Crystal from KIZZ said...

Thanx again Vin, I took widget off as I was playing with it and it turned out oll kooky. and ran out of time to fix. I am trying to find time to work on it again. Will add your new suggestions tough. Also thanx for the site on grabbing a button ... finding time to look at that too. will let you know how it goes.
Yeh! Vin! :)

Spotty said...

I have this problem: Did everything you said but it just shows as loading.

Tried this to fix it:

Go to Settings--->Site Feed---->Post Feed Redirect URL box and delete what is entered in the box. Leave the box empty and save settings.

But it still just says "loading"

Vin said...

Spotty,

There appear to be a lot of <br/> tags in the code. Delete the code in the HTML gadget and repaste it without the <br/> tags.

DO NOT SWITCH TO COMPOSE MODE. Save gadget.

DO NOT USE MS WORD TO COMPOSE CODE. You can use Notepad as it does not insert the br tags.

Mikkelian said...

Hello Vin,

It seems to ahve worked fine for the others, but somehow it just shows up on my blog as Loading... Gadget from The Blog Doctor.

I made all the changes you mentioned in the HTML code, but to no avail.

my blog is at :
http://simmering-pot.blogspot.com

Thanks

Vin said...

Mikkelian,

I do not see the gadget in your blog. Follow the steps carefully to install it.

Ruben said...

My site address is: twokidsandamacbook.blogspot.com

My issue is that there is a huge whitespace below the gadget. Any help is appreciated.

Thanks for the gadget!

NARESH said...

How do I add "Read More" instead of ... ??

http://maxalas.blogspot.com said...

there is a script that shows the positions of the blog there is a vertical style and horizontal style; to place under the theme, can you stacks the script, you look a long time thanks from GREECE

Nestie said...

Its working now thanks vin forgot to put www

4CAsonly Team said...

Hello Vin,

It seems to ahve worked fine for the others, but somehow it just shows up on my blog as Loading... Gadget from The Blog Doctor.

I made all the changes you mentioned in the HTML code, but to no avail.


Read more: http://www.blogdoctor.me/2009/01/random-rotating-post-gadget-with.html#ixzz1gbZTYCmI

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.