Recent Posts Widget With Snippets For Blogger:Digital Tech Inspiration

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 set the size of this summary(in number of characters).

For Further enhancements, you can add your own CSS styling and improve the look and feel of the widget. Lets move to the tutorial.

How to Add Recent Posts Widget With Snippets to Blogger?

STEP #1: Log on to Blogger

STEP #2: Go to Dashboard>Layout

STEP #3: Click on Add a Gadget

STEP #4: Select HTML/JavaScript gadget.

STEP #5: Copy/Paste the following code inside that gadget

<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://wikitechnol.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&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/AVvXsEjnnRyj3NvdjXt5Eav0og2o9nSF3omMTlWhw4-_oqYotHYf-n6FiG4VlkRmlcxdlGOWnD6bDDY3CyqGJwMvXT0MgyhHoKPslu_I8UK4Og8d54tUb_4vNDgAZcv_JZ_AXJ9ZFx5kl-iUpvfm/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>

How to Customize?

Change the value 5 with the 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 wikitechnol.blogspot.com with your blog/website address.

STEP #6: Now click on Save and it’s done.

So execute steps correctly and you are done. Head to your blog and check the trick executed. So don't forget us. We will only survive with your generosity. Like, Share, Follow and Subscribe. If you are facing any problem with implementing these codes just comment below for help. Stay tuned for more posts.