Recent & Random Posts Widget with large thumbnails

Again back with a recent & random posts widget. but this time the widget is more customized and looks hotter with larger thumbnails.

Talking about recent posts widget I've previously shared with you 3 simplest forms of recent posts widget. But this widget I'm now sharing can work as recent posts widget or random posts widget in your blog just with a change of single word in the code.
Let’s see how easily we can add it to your blog.

Adding the Widget to your blog

Navigate to Blogger Dashboard > Layout

Now choose Add a Gadget and choose HTML/JavaScript

Now in the widget paste the below and save the widget.

<center>
<style>
#exe_latest_post_main {background-color:#efefef;width: 300px;}
#exe_latest_post_container {position: relative;height: 140px;width: 295px;font-family: calibri;}
#exe_latest_post_main li {margin-left: -28px;margin-bottom: 10px;width: 295px;height: 140px;overflow: hidden;margin-top: 10px;padding: 0;list-style: none;}
#exe_latest_post_main li:first-child {margin-top: 5px;}
.exe_latest_post_desc h2 {display: block;font-size:14px;margin: 5px 0px;}
.exe_latest_post_desc {background: transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;color: #FFFFFF;padding: 2px;position: absolute;text-align: left;bottom: 0px;z-index: 99999;font-size:12px;}
</style>
<div id='exe_latest_post_main'>
<script style='text/javascript'>
//<![CDATA[
/*
Bloggslab Big Thumbnail Latest And Random Post */
function showgalleryposts(json){var numPosts=json.feed.openSearch$totalResults.$t;var indexPosts=new Array();document.write('<ul>');for(var i=0;i<numPosts;++i){indexPosts[i]=i}if(random_posts==true){indexPosts.sort(function(){return 0.5-Math.random()})}if(numposts_gal>numPosts){numposts_gal=numPosts}for(i=0;i<numposts_gal;++i){var entry_gal=json.feed.entry[indexPosts[i]];var posttitle_gal=entry_gal.title.$t;for(var k=0;k<entry_gal.link.length;k++){if(entry_gal.link[k].rel=='alternate'){posturl_gal=entry_gal.link[k].href;break}}if("content"in entry_gal){var postcontent_gal=entry_gal.content.$t}s=postcontent_gal;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){var thumburl_gal=d}else var thumburl_gal='http://i1133.photobucket.com/albums/m596/abu-farhan/Images_no_image.gif';document.write('<a href="'+posturl_gal+'"><li><div id="exe_latest_post_container"><span class="exe_latest_post_desc"><h2>');document.write(posttitle_gal+'</h2>');var re=/<\S[^>]*>/g;postcontent_gal=postcontent_gal.replace(re,"");if(showpostsummary_gal==true){if(postcontent_gal.length<numchars_gal){document.write(postcontent_gal);document.write('</span>')}else{postcontent_gal=postcontent_gal.substring(0,numchars_gal);var quoteEnd_gal=postcontent_gal.lastIndexOf(" ");postcontent_gal=postcontent_gal.substring(0,quoteEnd_gal);document.write(postcontent_gal+'');document.write('</span>')}}document.write('<img src="'+thumburl_gal+'" width="'+post_image_width+'" height="'+post_image_height+'"/></div>');document.write('</li></a>')}document.write('</ul>')}
//]]>
</script>
<script style='text/javascript'>
var showpostthumbnails_gal = true;
var showpostsummary_gal = true;
var random_posts = false;
var numchars_gal= 100;
var numposts_gal= 10;
var post_image_width= 295;
var post_image_height = 140;
</script>
<script src='/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showgalleryposts&amp;max-results=999999'></script>
</div>
<center>

CUSTOMIZE THE WIDGET

if you do not want thumbnail to appear change the value true to false in var showpostsummary_gal

if you do not want post summary to appear change the value true to false in var showpostsummary_gal

if you want random posts instead of recent posts change the value false to true in var random_posts

GOOD LUCK! GOD BLESS!