Random Post Widget with Thumbnails and without Thumbnails for Blogger

Only popular post widget and recent post widget is not enough for blogs. Because your visitors will not get your old posts by this two widgets. So, in this respect a random post widget is more useful. Actually a random post widget helps visitors to get in touch with all kinds of post from all categories. Here, I will show you how to add a Random Post Widget with thumbnails and without thumbnails for your blogger blog. This widget is fully customizable.

Procedure to add Random Post Widget with Thumbnails:

Step-1: Go to your Blogger Dashboard >> Layout >> Add a Gadget

Step-2: From the pop-up window choose HTML/JavaScript

Step-3: Now copy and paste the below code inside the box.

<style>
#random-posts img{float:left;margin-right:10px;
width:65px;height:50px;background-color: #F5F5F5;padding: 3px;}
ul#random-posts {list-style-type: none;}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=4;
var rdp_snippet_length=150;
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)+"";};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/AVvXsEh3Uh8EkuOfJHfP-3ulSbIv_G2BefmI_y0G7Qngyeq1cn86v0-yao1bIS5BpjY9SEMX6a3Uti3JNdHftNTuf1h6s0cS2PUmTNe8U-eo4AOcB7i6EZ42wpi0B9uLJkEzkQjLIyq1Q7RPNaI/s1600/no_thumb.png"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<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>
</ul>

Customization:

To change the size of the thumbnails in pixels, replace the 65px value.
To change the summary length change the value 150 value from var rdp_snippet_length =150
If you want to hide post date and comment count change 'yes' from var rdp_info='yes' to 'no'
To change the number of posts change the value var rdp_numposts=4;

Finally click on Save. Enjoy :)

Procedure to add Random Post Widget without Thumbnails:

For Random Post Widget without thumbnails copy and paste the below code inside the HTML/JavaScript box.

<style>
#random-posts{border:1px solid #aaa;font-size:10pt;margin:auto;padding:0}
#random-posts li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfjsMnY01ME1msy2b4kbuDYQDl82i4YDI1nwm5konwMB8HVu39kUAsRvKARAH-TUHMgs9Nfz4YIbsUIHllHnnKuHGYDS2Nh1BUHPkfL51IYtXO67dihARnjLVBZvsEGuJOTZvHhZe_m0Rv/s1600/sprites.png) no-repeat 0 -67px;border-bottom:1px solid #ccc;height:36px;line-height:1.5em;list-style-type:none;margin:0;overflow:hidden;padding:6px 10px 10px 3.5em !important}
#random-posts img{display:none}
#random-posts{background:#f6f6f6;background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1))},#random-posts
</style>
<div id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=7;var rdp_snippet_length=0;var rdp_info='no';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)+"";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry);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/AVvXsEhQjS76Hup6QaTSO3sojEw19LnvxUMhscaujZcxxzauGmnHa4VPnbIqrFdVJcqAVueltIOZx096aF05ZPL7tCNayD6oGCzod5JDeULZeq3awyj4sQdkFtfp1Vc1KqSAHXKrTZRRFzRucv0/s1600/default.jpg"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" title="'+rdp_posttitle+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<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>

Customization: