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>

How to change the blog description header height in blogspot blogger site

This set of instructions will help you to adjust/reduce the size of the header according to your own custom design. You can adjust the space between the various elements of the header.



1. Go to design settings of our blogspot blog and click the Design tab on the first bar on the top.

2. Then click the Template Designer option given beneath.

3. In the Template Designer page, click Advanced.

4. In the side tab containing the options of Page Text...scroll down to the bottom and click Add CSS.

5. In the window given alongside, enter the following code.

-------------------------

.main-inner {padding-top:10px}

.date-outer {margin: -0px 0 10px;}

.descriptionwrapper{

margin-top: 20px;

}

In the above code, you can adjust the number sizes from 10px to 30px. And this way you can adjust the various space parameters. You can view the changes in the preview option given below.

6. Once your settings are correct, press the APPLY TO BLOG button.



Any doubts, you may post here.