Simple Recent Posts Widget For Blogger/Blogspot

The brain wages on this Recent Posts widget is that it volition exhibit non entirely post titles, but likewise post excerpts or snippets, together with it's slowly to customize or employ dissimilar mode on it. To instruct inwards friction match your ain design, y'all volition involve to modify the CSS mode - y'all tin alter the link or background color, the size together with color of text/links.

What y'all tin create amongst this widget:
- display post titles entirely
- alter the issue of posts
- alter the issue of characters of the post snippet/excerpt
- exhibit the post dates

See the screenshot below:

How to add together Recent Posts Widget to Blogger

1. Log inwards to your Blogger Dashboard > instruct to "Layout" together with click the "Add a Gadget" link:

2. From the pop-up window, scroll downwards together with conduct HTML/JavaScript from the list...

3. Select & re-create the code below the chosen widget together with glue it into the HTML/JavaScript content box:

Recent Posts Widget amongst Snippets

<div id="hlrpsa">
<script type="text/javascript">
function showrecentposts(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],i=r.title.$t;if(e==t.feed.entry.length)break;for(var s=0;s<r.link.length;s++)if("alternate"==r.link[s].rel){n=r.link[s].href;break}i=i.link(n);var a="...",d=r.published.$t,u=d.substring(0,4),o=d.substring(5,7),c=d.substring(8,10),l=new Array;if(l[1]="Jan",l[2]="Feb",l[3]="Mar",l[4]="Apr",l[5]="May",l[6]="Jun",l[7]="Jul",l[8]="Aug",l[9]="Sep",l[10]="Oct",l[11]="Nov",l[12]="Dec","content"in r)var m=r.content.$t;else if("summary"in r)var m=r.summary.$t;else var m="";var w=/<\S[^>]*>/g;if(m=m.replace(w,""),document.write('<div class="rctitle">'),standardstyling&&document.write("<br/>"),document.write(i),1==showpostdate&&document.write(" - "+l[parseInt(o,10)]+" "+c+" "+u),document.write('</div><div class="rcsumm">'),1==showpostsummary)if(standardstyling&&document.write(""),m.length<numchars)standardstyling&&document.write("<i>"),document.write(m),standardstyling&&document.write("</i>");else{standardstyling&&document.write(""),m=m.substring(0,numchars);var g=m.lastIndexOf(" ");m=m.substring(0,g),document.write(m+a),standardstyling&&document.write("")}document.write("</div>"),standardstyling&&document.write("")}standardstyling||document.write('<div class="bbwidgetfooter">'),standardstyling&&document.write(""),document.write(""),standardstyling||document.write("")}
</script>
<script type="text/javascript">
var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="http://blog-address.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts">
</script></div><a style="font-size: 9px; color: #CECECE; float: right; margin-top: 10px;" href=" " rel="nofollow" >Recent Posts Widget</a>
<noscript>Your browser does non back upwards JavaScript!</noscript>
<style type="text/css">
.rctitle a{color:#000000;text-transform:capitalize;font-size:13px;}#hlrpsa {color: #999999; font-size: 12px;}.rcsumm {border-bottom:1px dotted #cccccc; padding-bottom:10px;margin-top:5px;}
</style>

Recent Posts Widget Showing Post Titles Only

<div id="hlrpsb">
<script type="text/javascript">
function showrecentposts(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],i=r.title.$t;if(e==t.feed.entry.length)break;for(var d=0;d<r.link.length;d++)if("alternate"==r.link[d].rel){n=r.link[d].href;break}i=i.link(n);var s=r.published.$t,a=s.substring(0,4),o=s.substring(5,7),l=s.substring(8,10),u=new Array;u[1]="Jan",u[2]="Feb",u[3]="Mar",u[4]="Apr",u[5]="May",u[6]="Jun",u[7]="Jul",u[8]="Aug",u[9]="Sep",u[10]="Oct",u[11]="Nov",u[12]="Dec",standardstyling||document.write(""),document.write('<div class="rctitles2">'),standardstyling&&document.write(""),document.write(i),standardstyling&&document.write(""),1==showpostdate&&document.write(" - "+l+" "+u[parseInt(o,10)]+" "+a),standardstyling||document.write("</div>"),document.write("</div>"),standardstyling&&document.write("")}standardstyling||document.write('<div class="bbwidgetfooter">'),standardstyling&&document.write(""),document.write(""),standardstyling||document.write("/div")}
</script>
<script type="text/javascript">var numposts = 10;var showpostdate = false;var standardstyling = true;</script>
<script src="http://blog-address.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div><a style="font-size: 9px; color: #CECECE; float: right; margin-top: 10px;" href=" " rel="nofollow" >Recent Posts Widget</a>
<noscript>Oops! Make certain JavaScript is enabled inwards your browser.</noscript>
<style type=text/css>
#hlrpsb a {color: #000000;font-size:13px;text-transform:capitalize;}.rctitles2 {padding-bottom:10px;margin-bottom:10px;border-bottom: 1px dotted #cccccc;}
</style>

How to customize the recent posts widget:

To railroad train how many posts to display, alter the 5 value for the recent posts widget amongst snippets together with the 10 for the recent posts widget amongst post titles only.
If y'all desire to display the post dates, alter "false" to "true".
The recent posts widget amongst summary volition display 100 characters; if y'all desire simply about characters, alter the "100" value.
To alter the color of the links, modify the values inwards bluish together with for the font size, the values violet.
To alter the color of the posts snippets modify the values inwards light-green together with the values inwards orangish for the font size.
Replace the http://blog-address.blogspot.com text amongst your URL.

4. Save your widget... together with that's it. Enjoy!