How To Add Reccent Posts Gadget With Thumbnail in Blogger

This one is based on Mlxperience's -- "Recent Posts Widget", I just wanted to add some more features that can be easily customized and make it quite more attractive. What I added? A "Comment Bubble" replacing the text (Comments), an animated "Read More Button" and font size customization tag for "Comments & Date" span.

To install this widget on your blog, go to Blogger > Layout > Add A Gadget and paste the following codes in the content area;

 Here is the code

<script language="JavaScript">

imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWpO4OQazEM6-pHWvmarSpWk4Tz8Fu59PFivd6WGhj-GJbNZxnWdtVWn-OMbdIOvAK4FMQxl8Iqz2VVfVBmV97PkRyHown0wrYwQ8vhfKrFEJJ8iKd7e9DmTc-fS7hy6knZGxKJrePYto/s1600/img1.jpg";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdydgh2aJjDgkiVjbq4BYSNcUQjbl7DTAAybVyv23WwFUaLr_BJREofU5IrbluDT46zFe0CWpGpdoaDBJkp3a0G8ILa8MJVX0p1RJ2EQjCcAKFO7Q4ruD-y8i5CtVW_dpr_ZyyBJFDh6s/s1600/img2.jpg";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-cO71UR2wqoiHoCcNiESPpgjZxXCDiDT3655eY_Sa7TaJnDfql256daSjdLtM6VZrTiG096zxR16GolRrfpzoKAFF1RcAN8le1cwc5nAN0Z9yxEsTI7wb4J0_Nw1hN73CN_QZqE5WR5U/s1600/img3.jpg";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaU6pmei6qBuxUcrFl0t_t0qthok-q1pEnxSWHXVwkwd-_yx2IHDNHRQJr2kXMB5bcWFs2OiVdtuUgZz2llR4p1yEf3OadKQ0qC8WmQOGkyLO6jKlN3_eqBoJRmUxOZZf68r40zZ60W18/s1600/img4.jpg";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdIIbHHV1qIriOsKV2Aj9paijha8akY5ltVN513vlbaU3APA9FazGkDP_z2En79WhwipKE0nEKT6JMx9uKZWD-1sicKGbbfAXORxhq7GiyFCq0i09B387_kWXaZYH3x8eYdASlehNWuFY/s1600/img5.jpg";

showRandomImg = true;

tablewidth = 360;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#ffffff";

imgwidth = 40;
imgheight = 40;

fntsize = 12;
acolor = "#000";
aBold = true;
icon = " ";

text = "";
fsize= "11";

showPostDate = true;

summaryPost = 60;
summaryFontsize = 11;
summaryColor = "#666";
icon2 = " ";

numposts = 5;

home_page =

"http://yourblog.blogspot.com/";
</script>
<script type="text/javascript" src="http://www.weebly.com/uploads/3/9/3/0/3930875/recentposts.js"></script>

Now, before saving the widget see below the customization part of the above code;

• To edit the width of the widget as per your sidebar's width;

tablewidth = 360;

• To edit the border & background color of the widget;

borderColor = "#ffffff";
bgTD = "#ffffff";

• To edit the thumbnail image size;

imgwidth = 40;
imgheight = 40;

• To edit the post title font size & color;

fntsize = 12;
acolor = "#000";

• To edit the comments & date span font size;

fsize= "11";

• To edit the post summary lenght;

summaryPost = 60;

• To edit the post summary font size & color;

summaryFontsize = 11;
summaryColor = "#666";

• To edit the number of posts to be displayed;

numposts = 5;

The most important part is to replace http://yourblog.blogspot.com/ with your blog's home page Url.