Random Rotating Post Gadget with Excerpt

by Sushant Risodkar · 8 comments

Well this is new gadget specially for blogger users. This gadget shows your blog post randomly one by one with excerpt. You can easily install it in 3 steps and can place it above the posts or somewhere else.

You can have a look at the demo blog with it’s proper working. Click Here For the demo blog!

Random Rotating Blogger Tool

Now let me tell it’s features first provided from the author...

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.

How It Works?

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.

Installation

As I said in starting, installing this gadget is possible in just 3 steps which are as follow:

1. Go to Blogger Account>Blog>Layout. Here on the Page Elements tab, click on add gadget and then scroll down to click on Add Html/Javascript gadget.

2. Now on the blank space fill it with the following code.
<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=internal-sample”
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> and <a href=”http://www.smartbloggerz.com” target=”_blank”>SmartBloggerz!</a>.</div>

To eliminate any problem, you can also get the code from this text file.

In the following code above you have to first edit the things which are marked in bold Otherwise it won’t work for you.

Change “MYBLOG” to actual blog subdomain which you registered with and “BLOG_TITLE” to actual title of your blog. And after that Click on Save Button.

3. Now to make it look nice drag this gadget above the posts. See the screenshot for proper understanding:


Please make sure that after dragging the gadget you click on the save button to make that gadget look at that place.

Now Check your blog…

Optimize

Changing colors and size of this widget is very simple..Just look at the code properly and you will become expert in this 🙂

Credits

This cool gadget is created by Vin of BlogDoctor. So thank her for making this widget for blogger users.

You may ask your problems regarding this gadget by commenting below…

About Sushant Risodkar

Yo! I'm +Sushant Risodkar & my nickname on web is Typhoon. I'm a 19 yrs. old young blogger from India & the owner of SmartBloggerz. If you are looking for SUCCESS as a blogger & affiliate marketer then SmartBloggerz is the right blog for you. You can follow me on Twitter or be my friend on Facebook. And hey! Don't forget to LIKE SMARTBLOGGERZ on Facebook. Read more About Sushant Risodkar.

has written 377 superb article(s) on this blog

Follow me on Twitter · Visit my website →

Anonymous January 19, 2009 at 5:39 am

Thanks for this post
Can you also tell us that How you’ve added “What’s Next?” below Each post followed by a Thumbs Up sign.

Anonymous January 25, 2009 at 5:22 pm

Thank you, tried it but…
Its not random, its descending and cylce it (rotating backward) only that way, I need a “real random” please.

Angellaa February 24, 2009 at 7:31 am

Hmm, very cognitive post.
Is this theme good unough for the Digg?

Danta May 31, 2009 at 8:35 pm

Hi.. I look the demo, but I think the website has small error.. I don’t know what, but there is still look “loading” for long time

Danta’s last blog post..Sony PS1 Emulator untuk PC

Senthil Ramesh December 13, 2009 at 2:00 pm

That must be a cool thing to know it shows random posts which gives more exposure to old posts. But the sad thing is it is only for blogger users. Is there any such plugins for WP users, Typhoon?
.-= Senthil Ramesh´s last blog ..How To Use Facebook Effectively =-.

Typhoon December 13, 2009 at 7:44 pm

There could be but not knowing about i;, you can search wordpress plugin directory.

Senthil Ramesh December 28, 2009 at 8:32 am

Sure, I have found a plugin for it showing random posts at the sidebar.

John April 27, 2010 at 5:39 pm

This trick of .css using helps me to integrate this plugin perfectly in one of my websites. Thank you for the great idea. Your .css file was very useful for me.
.-= John@technology blog´s last blog ..Sony announces the official end of the disk =-.

Previous post:

Next post:



whos.amung.us