Random Post Widget with Thumbnail & Hover Effect for Blogger Sidebar.

Random Posts widget give maximum exposure of your content to your audience. Other content exposing widgets such as Related Posts Widget, Popular Posts Widget and Recent Posts widget expose your content according to a specified rule only.

For example, popular post widget displays posts depending upon number of page-views received by them. Page views for different posts remains in same descending order during a time period unless another posts get higher views.

For a regular visitor, this may be boring to see same content in sidebar of your blog during every visit.
Random Posts widget overcomes these limitations.

So, It is highly advised to install this widget along with other content exposing widgets to get a complementary effect between widgets to expose content up to maximum possible level.

How to Install Random Post Widget in Sidebar?

Step1. Login to Blogger Dashboard, Go to “Layout” and then click “Add a Gadget”.

Step 2. Select “HTML/JavaScript”:
Step 3:  In “Title” text area, enter “Random Posts” and paste the following code in “Content” text area:

<style>
.random-posts {
   width: 300px;
   text-align: left;
   font-size: 13px;
}
.random-posts a img {
  position: relative;
  border-radius: 5px;
  float: left;
  margin-right: 10px;
  margin-bottom: 1.5px;
  display: inline;
  border: 2px ridge #FDFFFE;
  height: 60px;
  width: 80px;
}
.random-posts img:hover{
  opacity: 0.6;
}
.random-posts li { 
  display: block;
  min-width: 260px;
  height: inherit;
  border: 1px solid #EEEEEE;
  margin: 5px 0px;
  padding: 7px;
  overflow: hidden;
  border-radius: 5px;
  background: #EDEDED;
}
.random-posts div {
  height: inherit;
  overflow: hidden;
}
.random-posts li:hover {background: #61E520;}
</style>
<div class='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=3;
var rdp_snippet_length=0;
var rdp_info='yes';
var rdp_comment='Comments';
var rdp_disable='Comments Disabled';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>  
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAA9CBPsqzjBZsLi7tsCYjrPNR0ixtUdUVlpDz8YJlSWg4U5O_TK07txZgjREp4FEBWwlNOm6LphQXH6gwaC7RB5uBWHgkKPfj-_daMC4Zp8c710SjO6cLq5_bdyEcQTs9RZIllqvHfvw/s1600/no_thumb.png"}}};document.write('<li style="list-style: none;">');document.write('<a href="'+rdp_posturl+'" rel="nofollow"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/></a>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span><div  class="rp-info">'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</div></span>'};document.write('<br/><div class="rp-snippet">'+rdp_snippet+'</div><div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script><div style='float:right; font-size:10px; vertical-align: bottom; float: right;'><a href='http://blogger-hatchery.blogspot.com/2015/01/random-post-widget-with-thumbnail-hover.html' target='_blank'>Get this widget</a></div>
</div>

Note: The code given above are not suitable for installing widget below posts. For installing this widget below posts, use code given here: How to install random posts widget below posts?


Step 4. Click on “Save” to save the changes.

Step 5. Now you have done. The random posts widget (snapshot given in right image) will appear in sidebar of your website.

Customization:

1. Change no. of posts to be appearing in widget by changing value in yellow highlighted code (rdp_numposts=3) in Step 3. 
2. Change value in red highlighted code (rdp_snippet_length=0;) from 0 to 100 for displaying a post summary below post links.
3. Change value in orange highlighted code (rdp_info='yes') from “yes” to “no” to disable date and comments below post links.        
4. Change the code highlighted in green color to change background of widget. Change second code to change background color during mouse hover.

I am sure that this posts have helped you. You should share and subscribe for further updates and new themes for the widget.

In case of any inquiry, please use comment box.