Recent Posts Widget Showing Post Titles For Blogger:Digital Tech Inspiration

Displaying a list of the recent posts in your sidebar is a great way to keep your visitors busy crawling? There are lots of recent posts gadgets you can use but the one we will be covering in this post will definitely grab the attention of the visitors and will increase the readership on your blog.

This recent posts widget 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 you can set some of your own styling by changing the color or giving some font styling. You can add your own CSS styling and improve the look and feel of the widget. Let’s move to the tutorial.

How to Add Recent Posts Widget Showing Post Titles 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

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, "");

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

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

document.write('<span>');

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

document.write(posttitle);

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

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

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

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

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('<i>');

postcontent = postcontent.substring(0, numchars);

var quoteEnd = postcontent.lastIndexOf(" ");

postcontent = postcontent.substring(0,quoteEnd);

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

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

}

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

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

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

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

}

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

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

document.write('');

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

}

</script>

var numposts = 10;

var showpostdate = false;

var showpostsummary = false;

var numchars = 100;

var standardstyling = true;

</script>

</script>

</div>

<div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"><a href="http://wikitechnol.blogspot.com/2012/12/recent-posts-widget-showing-post-titles.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://wikitechnol.blogspot.com" title="Recent Posts Widget">Digital Tech Inspiration</a></div>

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;

}

#dtirpsb { }

.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted;

}

.bbrecpost2 a:hover {

text-decoration:underline;

color: black;

}

</style>

How to Customize?

Change the value 10 with the number of posts you want to show.
Change false to true if you want the posts dates to appear.
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.