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] 

Random Posts Widget With Thumbnail - blogger

The Random Posts Gadget will  display a list of Random Posts(from your blog) on your Blog’s Sidebar. The Gadget has an options panel and can be configured to meet your needs. The Gadget inherits styles from your Blog. But you can override the colors if you want(this was done to support third party templates which doesn’t have the skin variables properly designed).

Artikel Blog Berterabur

CLICK HERE for demo and

CLICK HERE for direct install into your blogspot (need login)