Simple Random Post With Thumb Widget

Make your blog more access-able by using a widget thumbnail in random for your visitor to view.

Installation

• Go to Layout and click an Add A Gadget.
• Select HTML/Javascript widget.
• Copy the green Html/Javascript code below and paste it inside the content box.

If you have a problem to install html/java script it in blogspot, [Click Here] 

Copy / paste this code into your site

<!-- Style block for fancying-up the appearance --> <style> .rp-post-link { font-weight: bold !important; font-size: 120% !important; } .rp-summary { margin-top: 3px !important; font-size: 95% !important; line-height: 1.3em !important; word-wrap: break-word !important; } .rp-thumbnail { margin: 5px 5px 2px 0px !important; float: left !important; } .rp-pubdate { font-style: italic !important; margin-bottom: 3px !important; } </style> <!-- end style block --> <!-- Begin the script! --> <script type="text/javascript"> var randarray = new Array(); var l=0; var flag; var lengthsummary = 205; //Number of characters to limit summary to var numofpost=5; //Number of random posts to display function randomposts(json){ var total = parseInt(json.feed.openSearch$totalResults.$t,10); //fetch some random posts, making sure none are the same for(i=0; i < numofpost;){ flag=0; randarray.length=numofpost; l=Math.floor(Math.random()*total); for(j in randarray){ if(l==randarray[j]){ flag=1; } } if(flag==0&&l!=0){ randarray[i++]=l; } } //Fetch the info from the posts and write them out document.write('<div>'); for(n in randarray){ var p=randarray[n]; var entry=json.feed.entry[p-1]; //the object holding the feed data for a post var item =""; //holds the string to write out, containing all post info //----Post title link ---- var posttitle = entry.title.$t || "[Untitled]"; //A post with no title is called "[Untitled]" //Looks like the 'alternate' link is *usually* last, //but we don't know if it's *always* last, so loop backwards //for efficiency and correctness! for(k=entry.link.length -1; k >= 0 ; k--){ if(entry.link[k].rel=='alternate'){ item +="<a class='rp-post-link' href='" + entry.link[k].href + "'>" + posttitle + "</a>"; break; } } //----end post title link --- item += "<br" //this weirdness is because the Blogger post editor is STUPID... sorry. item += "/>" //----publication date ---- var pubdate = new Date(entry.published.$t).toDateString(); item +="<span class='rp-pubdate'>Posted On " + pubdate +"</span>"; //----end publication date ---- //----Thumbnail images ---- if('media$thumbnail' in entry)item += "<img class='rp-thumbnail' src='" + entry.media$thumbnail.url + "'>" //----end thumbnail images ---- //---summary text ---- var summary = ""; //Feed will have EITHER "summary" or "content" variables, depending on feed settings if ("content" in entry) { summary = entry.content.$t; } else if ("summary" in entry) { summary = entry.summary.$t; } //Strip HTML tags out of post summary var re = /<\S[^>]*>/g; summary = summary.replace(re, ""); item += "<p class='rp-summary'> " + summary.substring(0,lengthsummary) + " ...</p> "; //----end summary text --- document.write(item); //write out the data from the post } document.write('</div> '); //we've written out all the random post data! Done! } </script> <!-- the following calls the randompost function and passes it, essentially, the blog's feed --> <script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"> </script>

Search the text above after paste and change the number to customize your widget
var lengthsummary = 155; //Number of characters to limit summary to
var numofpost=5     number of post to view given 5 post, change how many you would prefer

*** Note - Troubleshooting***
There is a  problem on copying this widget. So to settle this do not use the html frame above but use this link form the other host, nowadays blogspot prevent copying long text.

[click here for the html/javascript]