Blogger Random Posts Widget With Thumbnail

Random Post is randomly showing your posts from beginning to the last post, this can be display as a widget on sidebar or before your footer, in this article will show show you a Blogger random posts widget with thumbnail or before footer.

To display this as a widget, first log-in to your Dashboard, and then click Layout, click Add a Gadget on your sidebar, scroll down and find HTML/JavaScript Gadget, paste this copy below inside it:

<style>
<!--
#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:72px;height:72px;padding:3px}
-->
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var randompost_numposts=5;
var randompost_snippet_length=60;
var randompost_info='yes'; 
var randompost_comment='Comment';
var randompost_disable='';
var randompost_current=[];var randompost_total_posts=0;var randompost_current=new Array(randompost_numposts);function totalposts(json){randompost_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&amp;max-results=0&amp;callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<randompost_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<randompost_current.length;j++){if(randompost_current[j]==rndValue){found=true;break}};if(found){i--}else{randompost_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(randompost_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<randompost_numposts;i++){var entry=json.feed.entry[i];var randompost_posttitle=entry.title.$t;if('content'in entry){var randompost_get_snippet=entry.content.$t}else{if('summary'in entry){var randompost_get_snippet=entry.summary.$t}else{var randompost_get_snippet="";}};randompost_get_snippet=randompost_get_snippet.replace(/<[^>]*>/g,"");if(randompost_get_snippet.length<randompost_snippet_length){var randompost_snippet=randompost_get_snippet}else{randompost_get_snippet=randompost_get_snippet.substring(0,randompost_snippet_length);var space=randompost_get_snippet.lastIndexOf(" ");randompost_snippet=randompost_get_snippet.substring(0,space)+"&amp;#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var randompost_commentsNum=entry.thr$total.$t+' '+randompost_comment}else{randompost_commentsNum=randompost_disable};if(entry.link[j].rel=='alternate'){var randompost_posturl=entry.link[j].href;if(y!=-1){randompost_posturl=randompost_posturl+'?m=0'}var randompost_postdate=entry.published.$t;if('media$thumbnail'in entry){var randompost_thumb=entry.media$thumbnail.url}else{randompost_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJZLUZgVoK4NLgz-7rHrFfRfCkjGJBCSq7LXrMN50t8OihZ4h39TGOIeqcE9704ejRjT05SX644ZJ6GPq-cEZPaGLN3l48ZTygnYRed6klWsP-OD1vb2gTfE9OexNoR-EGxGOVWWPThTJB/"}}};document.write('<li>');document.write('<img alt="'+randompost_posttitle+'" src="'+randompost_thumb+'"/>');document.write('<div><a href="'+randompost_posturl+'" rel="nofollow" title="'+randompost_snippet+'">'+randompost_posttitle+'</a></div>');if(randompost_info=='yes'){document.write('<span>'+randompost_postdate.substring(8,10)+'/'+randompost_postdate.substring(5,7)+'/'+randompost_postdate.substring(0,4)+' - '+randompost_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<randompost_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&amp;start-index='+randompost_current[i]+'&amp;max-results=1&amp;callback=random_posts\"><\/script>')};
</script>
</ul>

And to display random posts before your footer, you must go to Dashboard, Template and click Edit HTML, scroll down and find and paste the code above before this code below:

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'><span class='post-author vcard'>

To modify correspond to your needs will described as follows:

change this code below to find your style:

<!--
#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:72px;height:72px;padding:3px}
 -->

var randompost_numposts=5;        // how many post you want display
var randompost_snippet_length=60; // snippet length title
var randompost_info='yes';        // show comment count and date 
var randompost_comment='Comment'; // show comment text

That's it, thank you.