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

Share on facebook
Share on whatsapp
Share on pinterest
Share on telegram

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)

/* Recent posts by labels widget by tutes inside*/
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;
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'>
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<;k++){if([k].rel=='replies'&&[k].type=='text/html'){var[k].title;var[k].href;}
if([k].rel=='alternate'){[k].href;break;}}var thumburl;try{$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='';}
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;}
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(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(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
<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.

Share on facebook
Share on whatsapp
Share on pinterest
Share on telegram

8 thoughts on “Add Recent Post Widget With Thumbnail On Blogspot (Working Perfectly)”

  1. Hey Sirphren,

    Honestly speaking, you such a great blogger. I love your spirit.
    One thing I love more about you is that persistent spirit and the ability to organise things rightly.

    Anyways, just want to say WELDONE.
    I see Assist Blogger Academy at the Top most SOON!

Leave a Reply

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


Do You Want To Learn Cryptocurrency Trading?

Would you like to learn the easiest and detailed way to trade Cryptocurrency Trading in 2021?


WordPress Blog Creation

WordPress Blog Creation

Get FREE ACCESS to the course that teaches you how to create your blog (in under 7 days) without hiring an EXPENSIVE blog designer