13 Blogger | Recent Posts Widget With Thumbnail

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. See the DEMO!

Screen-shot: Recent Post Widget

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

Code:

<script language="JavaScript">
imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv-tNSE2AmT-MrcjTsRsQOkHSR6Iat0Jsg0qIAEw_2A69TGD8oLxOt3qHbYUX3D1_0lnEAhXhWFBCaKxkVcnjlQyvxBJtza21OPQ7e2u-ax4DpyReFi_iVoGJj1lZ5cWuCIPdzrrc3ruQ/s1600/img1.jpg";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKMT4OxMZoCyunvqzm33nFMsuXMrUfEgjx2NmZsyI9Gux5q6IzUR06jg4nQ0IzDp7utns6j30FwpaLGRWE8FZHG-uOt6VRUnpuPdKeN0KDe5aGAKPugGi1diirZhwMP5ue59pbyiT_yEk/s1600/img2.jpg";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ4DznNIE_lpSZQ8s71foU3hce2QWLgHQAILPevSJj7zTsmDE13cTveBpzuMWP_cNvhpF_JTFUWPrgPvaubCBYMPviMN62behe-vDJPVhFutWm4allTef1OC7iWZLCCxuSqtdM56RNqZo/s1600/img3.jpg";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZHSZ_dSuh-1ubiATdFhlLCz59-Qsq5mT8jjJcJDzejKgY6AtiQJPGJjF6QwYtRsZAFESDPqJM3C_0Ofi-sZATpAxau3JxhId3a65X_NgK6y55Wk76Lvmd8iSIE4q-6T21kBOE2-hLk2Q/s1600/img4.jpg";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibGHNDQoq6DZhRSH8nPCtn_6ERcEfCYghgySrq3ExPV_6bKeLCkpvetdmizJVRX5a_xgLH8iaNIWPlqHvqQgAUElUFM5dNuH3LhKBfP3wPRrXiVb0ph3hk7s9KoawOhKEw8UEq0ppfzno/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.

For advanced customization of the widget like changing the "Comment Bubble" and "Read More" button follow the steps below;

• Download the recentposts.js.zip file and unzip it and open the file with a text editor.
• Now, within this js file find <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje6JPF_8RoF0VJgdGOf1YhM03d8NUiRTthgCoEBJR4YY8TFzbI6uqmFuT2HkLqaa8rg4_vqWeiUUzGKCdFyjoH8mTPdjBXQ-3dyQbLgDQ1k8JlkBGLhUmK7tcX29omG0yimv6j3KNO6Umc/s1600/r_more.gif" style="padding-top:10px; padding-left:4px; height:15px; width:75px;"/></a> and replace the RED texts part with the Url of your new "Read More" image and edit the BLUE texts as per the width & height of your new "Read More" image.
• To change the "Comment Bubble" find <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilAMJlZIKV5NuJeYA_9SxRrZv6-7nVVP9LMgg3eZLcSONxzGzyJZexgNd5dr6Pg47d6q-jg_oLIemLYPn389kGFWtrCm2kuglW0mg3y9B3qFyi98ppwD0WZAg1Ntex-AaoRPdG9GLg8RV8/s1600/c_bubble.png"/> and replace the RED texts part with the Url of your new "Comment Bubble" image.
• Now, save the file and upload it to a javascript file hosting site like - YourJavascript.Com and in the above widget code replace the http://www.weebly.com/uploads/3/9/3/0/3930875/recentposts.js Url with the Url of your uploaded js file.
  

For any further help feel free to come through the comment section!