How to add Recent Posts with Thumbnails Widget for Blogger

Previously bloggers have been adding recent posts widget by using feed or with javascript which only displays recent posts links only. Now its time to display recent posts with thumbnails using html/javascript widget in blogger. This widget will show Title of Post, few lines of post, thumbnail of post, comments made in post, date of post etc.

Normally, some javascripts just re-size original uploaded image from post which takes a lot of time, to load a thumbnail for recent posts hence not much attractive and useful. But few of developers know that blogger also generates a 75×75 small image of your uploaded image in blogger. So, this widget uses that blogger generated 75×75 small image as a thumbnail which loads rapidly and takes negligible time for loading.

• Login to Your Blogger Account
• Goto Your Blogger Dashboard, Click on Design
• Now Add an HTML/Javascipt Widget and Put this Code in it.

<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0; float:right;margin:0 0 5px 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='http://blogergadgets.googlecode.com/files/recentpostswiththumbnailsv3.js'></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://YourBlogURL/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script><div style='width:1px;height:1px;overflow:hidden'><a rel='dofollow' href='http://www.folsol.com/'>Blogger tips</a></div></noscript>

• Change YourBlogURL to Your Blog address
• Change numposts = 5 to Show number of Recent posts with thumbnails
• Change numchars = 100 to number of characters to show in summary of recent posts
• Change true to false to activate or deactivate any feature of this widget

Now Just Save You Widget and Check Your Blog.

Your Recent Posts with Thumbnails Widget for Blogger has been added..!. Always Comment and Subscribe and share with others