Blog Free Widgets: Simple Random Post With Thumb Widget

Saturday, June 15, 2013

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>
    .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>


<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>

<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]