Recent Post widget along with picture thumbnail and blog content

Please follow below guideline to install this interesting widget

Step 1 :

Log on  Blogger. Then go to your Blogger Dashboard > Design/Layout > Page Element > Add a Gadget > HTML/JavaScript

Step 2 :

Copy and paste code below:

 <style type='text/css'>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;
float:left;margin:10px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script style='text/javascript' src='https://sites.google.com/site/fashiondegree/recent-post-thumbnail/recentpost.js?revision=1'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;</script>
<script src='http://Your-Blog-Url/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

 Step 3 :


Now change YOUR-BLOG-URL with your blog url.


Step 4 :


Save the template and view

See Below How it works

Random Blogger Post

Copy below Code

----------------------------------------------------------------------------------------------------

<script language="JavaScript">

imgr = new Array();


imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 298;

cellspacing = 8;

borderColor = "#ffffff";

bgTD = "#000000";

thumbwidth = 120;

thumbheight = 127;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 4;

home_page = "http:/yourblogaddress.com/";

</script>

<script src="https://sites.google.com/site/fashiondegree/recent-post-thumbnail/recentpost_thumbnail.js?revision=1" type="text/javascript"></script>

---------------------------------------------------------

 You may change red highlighted clause as you wish, After do the amendment log into blogger click add gadget and then select "Add Java Script/HTML" and then paste the code and save,

See Demo