Recent Posts Widget for Blogger With Thumbnails (Simple & Auto Scrolling)

Are you looking for a Recent Posts Widget for Blogger with Thumbnails? Yes, then I show you how to add a Simple, Auto Scrolling, and Animated Widget on the Blogger website.

You can integrate any Post Widget on your blogger website but I show some post widgets for your website so you can make your blog attractive.

Page Contents hide

1 Recent Posts Widget for Blogger

2 How to Add Recent Posts Widget on Blogger Website?

3 Simple Recent Post Widget for Blogger

4 Recent Post Widget With Thumbnails

5 Auto Scrolling Recent Posts Widget for Blogger

6 Animated Recent Post for Blogger

7 Stylish Post Widget for Blogger

8 Conclusion

How to Add Recent Posts Widget on Blogger Website?

Follow the below steps in order to add the recent post Widget on the Blogger website.

First, log in to your Gmail and go to the Blogger
Navigate to the ‘Layout’ option
Select ‘Add a Gadget’ at the sidebar
Copy any of the following widget HTML/JavaScript code
Paste the code (as shown in the screenshot) then Click Save

Note: Replace www.fazeelusmani.com with your website URL. You can also change the number of posts you want to display in the recent post section.

Simple Recent Post Widget for Blogger

<Center> </bold><a style="font-size:200%;"> Recent posts </a></bold></Center> <div id="hlrpsa"> <script type="text/javascript"> function showrecentposts(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],i=r.title.$t;if(e==t.feed.entry.length)break;for(var s=0;s<r.link.length;s++)if("alternate"==r.link[s].rel){n=r.link[s].href;break}i=i.link(n);var a="...",d=r.published.$t,u=d.substring(0,4),o=d.substring(5,7),c=d.substring(8,10),l=new Array;if(l[1]="Jan",l[2]="Feb",l[3]="Mar",l[4]="Apr",l[5]="May",l[6]="Jun",l[7]="Jul",l[8]="Aug",l[9]="Sep",l[10]="Oct",l[11]="Nov",l[12]="Dec","content"in r)var m=r.content.$t;else if("summary"in r)var m=r.summary.$t;else var m="";var w=/<\S[^>]*>/g;if(m=m.replace(w,""),document.write('<div class="rctitle">'),standardstyling&&document.write("<br/>"),document.write(i),1==showpostdate&&document.write(" - "+l[parseInt(o,10)]+" "+c+" "+u),document.write('</div><div class="rcsumm">'),1==showpostsummary)if(standardstyling&&document.write(""),m.length<numchars)standardstyling&&document.write("<i>"),document.write(m),standardstyling&&document.write("</i>");else{standardstyling&&document.write(""),m=m.substring(0,numchars);var g=m.lastIndexOf(" ");m=m.substring(0,g),document.write(m+a),standardstyling&&document.write("")}document.write("</div>"),standardstyling&&document.write("")}standardstyling||document.write('<div class="bbwidgetfooter">'),standardstyling&&document.write(""),document.write(""),standardstyling||document.write("")} </script> <script type="text/javascript"> var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars = 100;var standardstyling = true; </script> <script src="https://www.fazeelusmani.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"> </script></div><a style="font-size: 9px; color: #CECEC; float: right; margin-top: 10px;" </a> <noscript>Your browser does not support JavaScript!</noscript> <style type="text/css"> .rctitle a{color:#000000;text-transform:capitalize;font-size:13px;}#hlrpsa {color: #999999; font-size: 12px;}.rcsumm {border-bottom:1px dotted #cccccc; padding-bottom:10px;margin-top:5px;} </style>

Recent Post Widget With Thumbnails

Auto Scrolling Recent Posts Widget for Blogger

<script type='text/javascript'>
var jnWidth="100";
var jnScrollAmount="10";
var jnScrollDelay="50";
var jnDirection="left";
var jntargetlink="yes";
var jnnumPosts="10";
var jnBulletchar =">>>";
var jnimagebullet="yes";
var jnimgurl="http://1.bp.blogspot.com/-fKeh7aRkfVs/Tvll57YC8yI/AAAAAAAAAvY/pUwMXLHvSc8/s1600/arrowe.gif";
var jnfontsize="16";
var jnbgcolor="FFFFFF";
var jnlinkcolor="FF0000";
var jnlinkhovercolor="3366CC";
</script><script type='text/javascript' src='https://sites.google.com/site/thisismydropboxokay/files/advance%20scrolling.js' ></script>
<script type='text/javascript' src="https://www.fazeelusmani.com/feeds/posts/default?alt=json-in-script&callback=jnAdvRecentPostsScrollerv3&max-results=10" ></script>

Animated Recent Post for Blogger

<style>

/* CSS Recent Post Gallery Widget */.recent-grid {padding:0;clear:both;}

.recent-grid:after {content:"";clear:both;display:table;}

.recent-grid .galleryview{position:relative;display:inline-block;margin:6px 0;overflow:hidden;}

.recent-grid .galleryview a{text-decoration:none;float:left;position:relative;margin:0 6px}

.recent-grid .galleryview .ptitle{display:block;background:rgba(0,0,0,.7);clear:left;position:absolute;font-size:10px;line-height:1.3em;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;overflow:hidden;padding:5px;word-wrap:break-word;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s}

.recent-grid .galleryview:hover .ptitle{visibility:visible;opacity:1}

.recent-grid a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s}

.recent-grid a:hover img {border-color:#bbb;}

</style>

<script type='text/javascript'>

//<![CDATA[

// Recent Post Gallery

function gallerygrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-grid">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"http://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.png",s=n.replace("s72-c","s"+recentpost_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+recentpost_thumbs+'" height="'+recentpost_thumbs+'"/>',p=recentpost_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="galleryview">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}

//]]>

</script>

<script>

var recentpost_thumbs = 72;

var recentpost_title = true;

</script>

<script src="https://www.fazeelusmani.com/feeds/posts/summary?max-results=9&alt=json-in-script&callback=gallerygrid"></script>

Stylish Post Widget for Blogger

Conclusion

I hope this tutorial on the Recent Posts Widget for Blogger website helped you. I shared the various styles of Widget so you can add any of your choices. If it helped you then must share it with your blogger friends and colleagues. Also, let me know in the comments which widget you selected for your blog.

If you liked this tutorial then subscribe to my YouTube Channel for video tutorials. You can also find me on Twitter and Facebook.

Shakti banerjee

2021-03-03 at 12:38 pm

Not working
- Fazeel Usmani
  
  2021-03-03 at 8:08 pm
  
  Maybe you are doing some mistakes in HTML. I also uploaded a video tutorial and it worked well.
techtspot

2021-07-23 at 10:33 am

thanks for the recent posts code for my blog and it looked nice to my blog.
shinos

2021-08-01 at 11:37 pm

you this site blogspot bro?
- Fazeel Usmani
  
  2021-08-02 at 2:04 am
  
  No, brother.
  - Kashif Khan
    
    2022-02-13 at 1:35 am
    
    Kashif Khan
SergioFM

2021-11-06 at 6:07 am

It’s working so nice, thanks for all the code.
Mohammad Shahidul Islam

2022-06-20 at 9:47 am

Thank you so much.

Recent Posts Widget for Blogger With Thumbnails (Simple & Auto Scrolling)