Random Post Widget for Blogger with Thumbnail+Hover Effect and its Customization.

Random post widget in combination with Related posts widget gives maximum exposure of your content to your audience.
Currently available Related posts widget displays the posts covered under same label as the current post’s label. So other useful content under different labels remain unexposed.
But random post widget (snapshot given in image given below) displays posts randomly from entire list of blog posts unrelated to their labels, but this may leads to poor matching of articles. Thus any one of the two widget is not very helpful to take your audience to maximum content.

A complementary combination of both widgets is very helpful in maximum exposure of your content. Related posts widget can be installed with procedure given here: How to install Related posts widget at Blogger.com?

And, here is procedure to install the random post widget into your blog:

How to Install Random Post Widget at Blogger.com?

Step1. Make a backup of your current template. This will help you get previous look if something wrong takes place with implementation. If you don’t know how to make backup of blogger template, you can use this “Template>> Backup/Restore”.

Step 2. After login to Blogger Dashboard, Go to “Template” and then click “Edit Html”.

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

Step 3: Click anywhere inside the template code area, then press CTRL + F keys to open search box. Search for following code:

<div class='post-footer'>

You can select another div code where you want to appear the random post widget to appear as per requirement. By choosing the above code, the widget will appear just below your post.

Step 4. Just below the above code, paste the following code:

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<div style='margin-top:20px;'>
<h2>Random Posts</h2>
<div class='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=6;
var rdp_snippet_length=0;
var rdp_info=&#39;no&#39;;
var rdp_comment=&#39;Comments&#39;;
var rdp_disable=&#39;Comments Disabled&#39;;
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(&#39;&lt;script type=\&quot;text/javascript\&quot; src=\&quot;/feeds/posts/default?alt=json-in-script&amp;max-results=0&amp;callback=totalposts\&quot;&gt;&lt;\/script&gt;&#39;);function getvalue(){for(var i=0;i&lt;rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j&lt;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>
&lt;script type=&#39;text/javaScript&#39;&gt;  
function random_posts(json){for(var i=0;i&lt;rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if(&#39;content&#39;in entry){var rdp_get_snippet=entry.content.$t}else{if(&#39;summary&#39;in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet=&quot;&quot;;}};rdp_get_snippet=rdp_get_snippet.replace(/&lt;[^&gt;]*&gt;/g,&quot;&quot;);if(rdp_get_snippet.length&lt;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(&quot; &quot;);rdp_snippet=rdp_get_snippet.substring(0,space)+&quot;&amp;#133;&quot;;};for(var j=0;j&lt;entry.link.length;j++){if(&#39;thr$total&#39;in entry){var rdp_commentsNum=entry.thr$total.$t+&#39; &#39;+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel==&#39;alternate&#39;){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if(&#39;media$thumbnail&#39;in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyYv9FHKGElAL3V4vq_-D6daRjj_rTT5ur5ivDouBKRYxgtuZu7qbTzfkZ_tQRdyWjplms3gJNVVzdCkd0qlEWgSNlM56Rbgl9-99k6_2474OnoJrCoctKtEthjB5Z26xJJegPL5tSWVU/s1600/no_thumb.png&quot;}}};document.write(&#39;&lt;li&gt;&#39;);document.write(&#39;&lt;a href=&quot;&#39;+rdp_posturl+&#39;&quot; rel=&quot;nofollow&quot;&gt;&lt;img alt=&quot;&#39;+rdp_posttitle+&#39;&quot; src=&quot;&#39;+rdp_thumb+&#39;&quot;/&gt;&lt;/a&gt;&#39;);document.write(&#39;&lt;div&gt;&lt;a href=&quot;&#39;+rdp_posturl+&#39;&quot; rel=&quot;nofollow&quot; title=&quot;&#39;+rdp_snippet+&#39;&quot;&gt;&#39;+rdp_posttitle+&#39;&lt;/a&gt;&lt;/div&gt;&#39;);if(rdp_info==&#39;yes&#39;){document.write(&#39;&lt;span&gt;&lt;div  class=&quot;rp-info&quot;&gt;&#39;+rdp_postdate.substring(8,10)+&#39;/&#39;+rdp_postdate.substring(5,7)+&#39;/&#39;+rdp_postdate.substring(0,4)+&#39; - &#39;+rdp_commentsNum)+&#39;&lt;/div&gt;&lt;/span&gt;&#39;};document.write(&#39;&lt;br/&gt;&lt;div class=&quot;rp-snippet&quot;&gt;&#39;+rdp_snippet+&#39;&lt;/div&gt;&lt;div style=&quot;clear:both&quot;&gt;&lt;/div&gt;&lt;/li&gt;&#39;)}};getvalue();for(var i=0;i&lt;rdp_numposts;i++){document.write(&#39;&lt;script type=\&quot;text/javascript\&quot; src=\&quot;/feeds/posts/default?alt=json-in-script&amp;start-index=&#39;+rdp_current[i]+&#39;&amp;max-results=1&amp;callback=random_posts\&quot;&gt;&lt;\/script&gt;&#39;)};
&lt;/script&gt;
</div><div style='float:right; font-size:10px; vertical-align: bottom; float: right;'><a href='http://blogger-hatchery.blogspot.com/2015/01/random-post-widget-for-blogger-with.html' target='_blank'>Get this widget</a></div></div></b:if>

Step 5. Now comes the styling (css) part. Search the following code:

]]></b:skin>

and paste following code just above previous code:

.random-posts a img {
  position: relative;
  border-radius: 10px;
  float: left;
  margin-right: 10px;
  margin-bottom: 1.5px;
  display: inline;
  border: 2px ridge #FDFFFE;
}
.random-posts img:hover{opacity: 0.6;}
.rp-snippet {
  display:none;
}
.random-posts li { 
  display: inline-block;
  width: 200px;
  height: 77px;
  border: 1px solid #CEC3C3;
  margin-top: 5px;
  margin-right: 5px;
  margin-left: 5px;
  margin-bottom: 5px;
  padding: 7px;
  overflow: hidden; background: #efefef;
  border-radius: 10px;
}

.random-posts li:hover {background: #D0D0D0; color:#fff; }
.random-posts ul {
  margin: 0;
  line-height: 1.2;
  text-align: center;
  list-style-type: none;
  padding: 0px;
  display: inline-block;
  width: 225px;
}
.random-posts div {
  height: 75px;
  overflow: hidden;
}

Step 6. Now you have done. The random posts widget will appear in your website.

Customization:

1. Change no. of posts to be appearing in widget by changing value in yellow highlighted code in Step 4. 
2. Change the code highlighted in green color to change background of widget. Change second code to change background color during mouse hover.
3. Change margins in Red highlighted codes to change width of posts and margin between two random posts to fit all the random posts (in present case 6) in the widget in fill in entire width of your website.

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.