Tutorial:How to add recent posts widget with image

1. Go to dash board of your Blog.

2. Click on layout tab.

3. Click on add gadget button 

4. Select html/java script option.

4. Give name to title as recent posts or anything u like.

5. copy the below code and paste it onto content.

=======================================


<div id="hlrpsb">
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.js"></script>
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"><a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://helplogger.blogspot.com" title="Recent Posts Widget">Helplogger</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#rpdr {background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj81jdnQ9sZEXAeJG6BtVcWquNdqJ9dOZg8jTIrH4IKnVkC9buFXBMcBVrcKW3rep5304U2rbNpW9vCDamAr6F0JXtCnt9sPXqYDn__fIRytmkpaYu8soXusVb174LbnJw4sIJGZPwzCR3A/s1600/blogger.png ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsb { }
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }

</style>

=======================================

6. Now change the red color highlited code to ur blog address.
Note: Dont alter anything else.

7. Save it and see the changes on your blog by refreshing.
Your done..!!!!

Hope it helped you all.
Leave us ur comments or queries.