Add Recent Post Widget With Thumbnail On Blogspot (Working Perfectly)

One of Assist Blogger Academy readers requested we write about Recent Posts Widgets for Blogspot. If perhaps you need this recent post widget on your blogger blog, quickly check out how to add recent post widget with thumbnail on Blogspot.

Why you need recent post widget on your blog

If the kind of blogger templates you use doesn’t have this feature, there is likelihood that your visitors may be confused to know which of your posts are the recent ones.

When you have this widget on your blog, it can further help increase your page views and reduce your bounce rate by making sure your readers stay longer. For a guide, check out how to add recent post from a particular label on blogspot.

Recent post with thumbnail and without thumbnail, which one?

It is simple! Picture catches attention more than just a text link. I choose recent post widget with thumbnail over recent post widget with just links.

How to add recent post widget with thumbnail on Blogspot

To add recent post widget on your blogger blog, follow the steps below.

(1). Copy the code below (click on [+] sign, it will open on new tab you can then copy)

<style>
/* Recent posts by labels widget by tutes inside*/
img.label_thumb{
float:left;
margin-right:10px !important;
height:75px; /* Thumbnail height */
width:75px; /* Thumbnail width */
border: 1px solid #fff;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}
#label_with_thumbs { text-align: justify;
font: normal 18px Port Lligat Slab;
float: left;
width: 98%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}
ul#label_with_thumbs li {
padding:8px 0;
min-height:75px;
margin-bottom:0px;
border-bottom: 1px dotted #999999;
}
#label_with_thumbs li{
list-style: none ;
padding-left:0px !important;
}
#label_with_thumbs a:visited {
    text-decoration: none;
    color: black;}
#label_with_thumbs a:link {
    text-decoration: none;
    color: black;}
#label_with_thumbs a { text-transform: none;}
#label_with_thumbs a:hover { text-decoration: underline;}
#label_with_thumbs strong {padding-left:0px; }</style>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul id="label_with_thumbs">');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=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/s1600/picture_not_available.png';}
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]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');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(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>
<script type='text/javascript'>var numposts = 5;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = false;var numchars = 25;</script>
<script type="text/javascript" src="/feeds/posts/default/?published&alt=json-in-script&callback=labelthumbs"></script>

 

(2). Go to your blogger dashboard. Click on layout. When it opens, then click on Add Gadget on the sidebar

Blogger layout

Gadget for pop-up email subscription form

(3). When it open, click on on HTML/JAVASCRIPT

recent post widget with thumbnail on blogspot

(4). Paste the code you copied above and paste as shown below.

recent post widget with thumbnail

(5). Before you save, check the code and change the following to your preferred value. Check the last section of the code for better understanding.

  • Number of post: var numposts = 5; (Change the figure to your preferred value)
  • To show thumbnail or remove it: showpostthumbnails = true; ( To remove post thumbnail, change it to false).

After doing all that, make sure you save.

Wrapping up how to add recent post widget with thumbnail on blogspot

I hope this post has been able to help you add recent post widget with thumbnail on your Blogger blog. This is the same code i used on one of my Blogger blog and it works.

Does the widget code work for you? let me know in the comment below.

About the Author

SirPhren

I am Obembe Sunday Dapo (aka SirPhren). Blogger, Blog and Web Designer, Writer and Blog Tutor. I design blogs & website for businesses and people at affordable rates. Connect with me on WhatsApp (09030945533) (For your web management).

Comments

  1. Create your Web Presence with Namecheap

Leave a Reply

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

Find a domain starting at $0.88

powered by Namecheap