Latest News
Home » All Blogger Tips » Add a stylish Recent post widget for blogger
web development, SEO services, Web designing

Add a stylish Recent post widget for blogger

Add a stylish Recent post widget for blogger

In my previous posts about recent post widget I had provided you with Simple Recent post widget and also with Animated Recent post widget. Here in this post I will provide you all with a new stylish widget that would attract a lots of people towards it. This widget is with a thumbnail and a scroll so makes your website very attractive.
If you want this stylish recent post widget then just follow the following steps:

Steps to add Stylish Recent post widget:

  • Go to your blogger dashboard.
  • Click on layout.
Add a stylish Recent post widget for blogger
  • Click on add widget and select HTML/java.
Add a stylish Recent post widget for blogger
  • Now just copy the following code in it:

<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 <; k++) {
if ([k].rel == ‘alternate’) {
posturl =[k].href;
posttitle =;
var readmorelink = “»»”;
readmorelink =;
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;}
if (“summary” in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = “”;
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, “”);
if (!standardstyling) document.write(”);
if (standardstyling) document.write(”);
if (standardstyling) document.write(”);
if (showpostdate == true) document.write(‘ – ‘ + cdday + ‘ ‘ + monthnames[parseInt(cdmonth,10)] + ‘ ‘ + cdyear);
if (!standardstyling) document.write(‘<div”>’);
if (standardstyling) document.write(”);
if (showpostsummary == true) {
if (standardstyling) document.write(”);
if (postcontent.length < numchars) {
if (standardstyling) document.write(‘‘);
if (standardstyling) document.write(”);}
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(”);}
if (!standardstyling) document.write(”);
if (standardstyling) document.write(”);
if (!standardstyling) document.write(‘


if (standardstyling) document.write(”);
if (!standardstyling) document.write(‘/div’);
10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;”></script></div>
<style type=text/css>
#bloggerfascinator-recent a {font-family:Arial;transition:background .2s;display:block;padding-left:9px;padding-top:6px;padding-bottom:6px;
font-weight:bold;text-decoration:none;color: #0066cc;font-size: 12px;}
#bloggerfascinator-recent a:hover {background:#eaeaea;transition:background .2s;color:#cc0066;text-decoration:none;}#rpdr {background: url( ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:black; text-decoration:none;}
#rpdr a:hover {color:black; text-decoration:none;}
.bbrecpost2  {
border-left:1px solid #ddd;
border-right:1px solid #ddd;
border-left: 1px solid rgba(0,0,0,.2);
border-right: 1px solid rgba(0,0,0,.2);
border-bottom: 1px solid #ddd;

  • Now just change the website name in place of
  • If you want to change the number of posts shown then just change count 8
  • You can also change the height of widget by changing “height”:”500
  • Save the widget and you are done 🙂
Thanks very much to admin of helplogger to provide this wonderful widget.

Originally posted 2013-05-14 06:13:00.

About Vishal Sharma

Hi`i' m +Vishal, a Search Engine optimizer, internet marketer, web designer, affiliate marketer & founder of this blog. I love to learn and share new things. For any query or help you can contact me at any time.


  1. Wow! this will be very helpful dude. Thanks for sharing it.

  2. You are welcome Mitch 🙂

  3. Debopam Banerjee

    Good one for blogger users….. Thanks for sharing….

  4. You got a nice blog….And this widget is good one for blogger users….Thanks for sharing….

  5. thanks for your post. it works really well.

  6. Its great 🙂
    Thanks for your response David 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *


This site uses Akismet to reduce spam. Learn how your comment data is processed.