Add beautiful Recent Latest Posts Widget Snippet and Image

to change the number of characters of the post snippet/excerpt
show the post dates, display post titles only, change the number of posts.

Option one:
<div id="hlrpsa">
<script src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.js">
</script>
<script>
var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script></div>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
#hlrpsa a {color: #0B3861; font-size: 13px;} #rpdr {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYWQD8UTfnDXq6rzx49otEuhdMQYZUVNf4NUZ3zUXopcinML2UgERC6OwQRCzuRLj7bylVQpcbbnQbnPNenrt3G-c9dAg8ECx8xNLyCtaNe6wOTflDoC0jQdHqsyXGyAhqJ4vvEfIBwYTs/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;}
#hlrpsa { color: #999999; font-size: 11px; border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}
.hlrps a {font-weight:bold; }
.hlrpssumm {}
</style>

Option 2 Only Post Titles
<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>
<noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#hlrpsb a {color: #0B3861; font-size: 13px;} #rpdr {background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYWQD8UTfnDXq6rzx49otEuhdMQYZUVNf4NUZ3zUXopcinML2UgERC6OwQRCzuRLj7bylVQpcbbnQbnPNenrt3G-c9dAg8ECx8xNLyCtaNe6wOTflDoC0jQdHqsyXGyAhqJ4vvEfIBwYTs/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;}
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>

Make changes to code as shown below
Change 5 (option 1) and 10 (option 2) with the number of posts you want to display.
Change false to true if you want the posts dates to appear
Change 100 (option 1) if you want more characters to be displayed.
To change the color and font size of the links, modify the values in blue (links) and violet (font-size)
To change the style of posts summary, modify the values in green (color) and orange (font size)
Replace the your-blog text with the name of your blog or if you have a custom domain change all the bolded line with your address like in this example:
 http://www.your-site.com/feeds/posts/default....

Another code option is here:

<div class="$bs-recent-posts-widget">
<script src="http://helplogger.googlecode.com/svn/trunk/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",
"pipe_params":{"URL":"http://download-funny-photos-new-indian-song.blogspot.com/feeds/posts/default"},
"hideHeader":"false","height":"500","count": 8 }</script>
<style type=text/css>
.$bs-recent-posts-widget {margin:10px 0px;padding:0px;}
.ybr li  {border-bottom:0px #cccccc dotted; padding:0px 0px 10px 0px!important;}
.pipesTitle {padding-top:0px;}
.pipesDescription {display:true;}
.ycdr {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiecgk1cykxqFj9WZNL_d5blV0lhF5Ad9uOftnS68wXUSlzCCnA6et0qzfwoG9ZvQNvCqwE3qtFXiD435q_0nrIabO69dlyVT9l99OZtv8DcOqVJhbLvERtM7yWEtxqAeV4kFbEdg4Yv0o/s1600/logo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 4px 0px 0px 0px;line-height:14px;}
.ycdr, .ycdr a {color:#999999;}
.widget .popular-posts ul {padding-left:0;}
</style>