How to add Recent Posts Widget with Snippets For Blogger

How to add Recent Posts Widget with Snippets For Blogger

The Recent posts widget for blogger displays recent post titles and their summaries in your sidebar.you can customize the number

of posts to display, whether or not to display the posts date and even the size of this summary (in number of characters).

>> fast Copy the html code from the below box.

<div id="dtirpsa">

<script style="text/javascript">

function showrecentposts(json) {

  for (var i = 0; i < numposts; i++) {

    var entry = json.feed.entry[i];

    var posttitle = entry.title.$t;

    var posturl;

    if (i == json.feed.entry.length) break;

    for (var k = 0; k < entry.link.length; k++) {

      if (entry.link[k].rel == 'alternate') {

        posturl = entry.link[k].href;

        break;

      }

    }

    posttitle = posttitle.link(posturl);

    var readmorelink = "....";

    readmorelink = readmorelink.link(posturl);

    var postdate = entry.published.$t;

    var cdyear = postdate.substring(0,4);

    var cdmonth = postdate.substring(5,7);

    var cdday = postdate.substring(8,10);

    var monthnames = new Array();

    monthnames[1] = "Jan";

    monthnames[2] = "Feb";

    monthnames[3] = "Mar";

    monthnames[4] = "Apr";

    monthnames[5] = "May";

    monthnames[6] = "Jun";

    monthnames[7] = "Jul";

    monthnames[8] = "Aug";

    monthnames[9] = "Sep";

    monthnames[10] = "Oct";

    monthnames[11] = "Nov";

    monthnames[12] = "Dec";

    if ("content" in entry) {

      var postcontent = entry.content.$t;}

    else

    if ("summary" in entry) {

      var postcontent = entry.summary.$t;}

    else var postcontent = "";

    var re = /<\S[^>]*>/g;

    postcontent = postcontent.replace(re, "");

 document.write('<div class="mtrpw">');

    if (standardstyling) document.write('<br/>');

    document.write(posttitle);

    if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);

 document.write('</div><div class="mtrpwsumm">');

    if (showpostsummary == true) {

      if (standardstyling) document.write('');

      if (postcontent.length < numchars) {

         if (standardstyling) document.write('<i>');

         document.write(postcontent);

         if (standardstyling) document.write('</i>');}

      else {

         if (standardstyling) document.write('');

         postcontent = postcontent.substring(0, numchars);

         var quoteEnd = postcontent.lastIndexOf(" ");

         postcontent = postcontent.substring(0,quoteEnd);

         document.write(postcontent + ' ' + readmorelink);

         if (standardstyling) document.write('');}

}

 document.write('</div>');

    if (standardstyling) document.write('');

}

if (!standardstyling) document.write('<div class="bbwidgetfooter">');

if (standardstyling) document.write('');

document.write('');

if (!standardstyling) document.write('');

}

</script>

<script>

var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;

</script>

<script src="http://onyourphone.blogspot.in/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">

</script></div>

<div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">

<a href="http://wikitechnol.blogspot.com/2012/12/recent-posts-widget-with-snippets-for.html" target="_blank" title="Grab this Recent Posts Widget">Recent Posts Widget</a> by <a href="http://wikitechnol.blogspot.com" title="Recent Posts Widget">Digital Tech Inspiration</a></div>

<noscript>Your browser does not support JavaScript!</noscript>

<style type="text/css">

#rpdr {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ePFdL7ty35UVsO-MGdmpWn7oy_-rSmW5BAbfQ8pP01pNBx47xAif-_oGXq0jZ-b-r3tRTKzrNG6B42rGuGO7qYJPVcuKREx2bCZLm0L_GRv-m3vzZm3gF2GpqiMcAtOdIYzClZ7GkeCs/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;}

#dtirpsa { border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}

.hlrps a {font-weight:bold; }

.hlrpssumm {}

</style>

Now Go to >> Sing in your Blogger account

Go to >>>> Blogger Dashboard >> layout

Click >> Ad a Gadget box.

Select HTML/ JavaScript  gadget

Just copy  html code and past here

Now save it

How to customize??

* Change the value (5) With number of posts you want to show 

* Change (False) to true if you want the posts dates to appear.

* Change the value (100) if you want more characters to be displayed.

* Change (http://onyourphone.blogspot.in)With your Blogger Blog / website address 


Now save it..

Don't forget to like us on facebook.