Aug 7, 2016

Add Automatic Slider Featured Posts Widget to Blogger

slider posts widget for blogger
We always want readers to stay on our blog rather than move onto another. This habit is not selfish. When people read our blog post then we want they read another too, right? When someone read a blog post and after reading leave blog then it affects bad to blog's bounce rate. So if you want readers stay on your blog and read your blog posts then we are here with stylish automatic featured posts slider widget for blogger.

Automatic Slider Posts Widget for Blogger

A blogger uses many widgets for attracting the readers on their blogs, for example: Popular Posts Widget, Recent Posts Widget, Random Posts widget, etc. Automatic slider featured posts widget is also one of them widgets which a blogger wants to use on their blogger blog.

Automatic featured posts widget can increase page views of your blog because it is showing several posts with featured images on your blogger blog. This slider featured post widget grab the attention of your reader thus your blog's page views going up day by day. So, if you want to add this widget on your blogger blog then read guide below. You can see live demo below.

Demo of Featured Slider Posts Widget for Blogger
Live Demo

Note: You need to upload images through Blogger, it doesn't recognize pictures from other sites.

How To Add Slider Featured Posts Widget to Blogger?

  • GO To Blogger >> Layout >> Add A Gadget >> Select HTML/JavaScript.
  • Add below code inside empty popup box.

<style type="text/css">
ul.featured-widget-list,ul.featured-widget-list li{margin:0;padding:0;list-style:none;position:relative }ul.featured-widget-list li{display:none}ul.featured-widget-list li:nth-child(1){display:block;line-height:0}ul.featured-widget-list img{border:0;width:100%;height:auto}ul.featured-widget-list .featuredbg{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(;background-position:0% 100%;background-repeat:repeat-x}ul.featured-widget-list .featuredbg:hover{opacity:.1}ul.featured-widget-list h5{position:absolute;left:0;right:0;text-align:center;bottom:10px;z-index:2;color:#fff;margin:0;text-transform: capitalize;padding:10px 20px;line-height:1.9em;letter-spacing:0.3px;font: 600 16px 'Abel', sans-serif;overflow:hidden}ul.featured-widget-list li:hover h5{bottom:30px}ul.featured-widget-list .featured-meta{font: 11px 'Abel', sans-serif;letter-spacing:0.3px;position:absolute;bottom:0;left:0;right:0;text-align:center;z-index:2;color:#fff;opacity:0}ul.featured-widget-list h5, ul.featured-widget-list .featured-meta {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}ul.featured-widget-list li:hover .featured-meta{bottom:20px;opacity:1}.feat-buttons{position:absolute;top:50%;left:0;z-index:5;width:100%}
.feat-buttons a{text-indent:-9999px;margin:0 7px;width:15px;height:15px;padding:5px;background:#000;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter: alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;position:relative;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}.feat-prev{float:left;}.feat-next{float:right;}.feat-buttons a.feat-prev::before, .feat-buttons a.feat-next::before{content:"";width:0;height:0;border-width:6px 7px;border-style:solid;border-color:transparent #fff transparent transparent;position:absolute;top:50%;margin-top:-6px;margin-left:-11px;left:50%}
.feat-buttons a.feat-next::before{border-color:transparent transparent transparent #fff;margin-left:-3px}
<div id="featuredbwidget"></div>
<link href='' rel='stylesheet' type='text/css'/>
<script src="" type="text/javascript"></script>
<script type='text/javascript'>
function featuredbwidget(a){(function(e){var h={listURL:"",featuredNum:3,featuredID:"",feathumbSize:300,interval:5000,autoplay:false,loadingFeatured:"nextfeatured",pBlank:"",byMonth:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],listbyLabel:false};h=e.extend({},h,a);var g=e(h.featuredID);var d=h.featuredNum*200;g.html('<div class="featslider"><ul class="featured-widget-list"></ul><div class="feat-buttons"><a href="#" class="feat-prev">Prev</a><a href="#" class="feat-next">Next</a></div></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.feathumbSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.feathumbSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.byMonth[parseInt(p,10)-1];l+='<li><a href="'+q+'"><div class="featuredbg"></div><img class="featuredthumb" src="'+u+'"/><h5>'+k+'</h5></a><div class="featured-meta"><span class="fdate"><span class="fday">'+t+'</span> <span class="fmonth">'+v+'</span> <span class="fyear">'+x+'</span></span> - <span class="fauthor">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingFeatured)};var c=function(){e(h.featuredID+" .feat-next").click()};var b=function(){e.get((h.listURL===""?window.location.protocol+"//""/feeds/posts/summary"+(h.listbyLabel===false?"":"/-/"+h.listbyLabel)+"?max-results="+h.featuredNum+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.featuredID+" .feat-prev").click(function(){e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));return false});e(h.featuredID+" .feat-next").click(function(){e(h.featuredID+" .featslider li:last").after(e(h.featuredID+" .featslider li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));e(h.featuredID+" .featslider").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingFeatured)},d)};e(document).ready(b)})(jQuery)};

Required Editing:

  1. listURL: Replace "", with your URL.
  2. featuredNum: Add the Numbers to display posts in slider widget.
  3. listbyLabel: If you want to show posts by specific label, such as the Label "Blogger Widgets" then it will be written as listbyLabel: "Blogger Widgets".
  4. feathumbSize: 350 is size of image dimension in pixels set it as your need.
  5. interval:3000, This is time in milliseconds to change the posts one by one.
  6. autoplay:true, Change true to false, If you don't want the slides to change automatically.
  • Once everything is done, Save it.
  • That's it. Now open your blog and see it live on your blogger blog.

Recommended Articles & Blogger Plugins

  1. 5 Easy Tricks to Write Magnetic & Powerful Content for Blog
  2. 10 Effective SEO Tips-Tricks for Blogs
  3. How To Add Sitelinks to Google Search Result for Your Blog
  4. How To Show Star Rating Review in Google Search Result
  5. Stylish Contact Form For Blogger! Never Seen Before
Credit: Helplogger


So above guide is about "How To Add Automatic Slider Featured Posts Widget to Blogger?" We hope, You will like it and you have added it successfully on your blogger blog. If anyhow problem persist after following above steps then you can ask us via dropping a comment below. Do Share.
Thank You! Stay Blessed!


  1. Nice template u got ... i feel its little too colorful. especially red . i think you should change the color codes....plain colors would be awesome ... im a newbie blogger.your posts gave me lots of knowledge about css designs . thanks . please visit my blog and give me your opinions too. thanks
    my blog
    im from kerala by the way

    1. @Jizal, Thank you so much for your suggestions and motivating words. :)
      I've checked your blog and i find it awesome with some nice articles on tech niche.
      Okay! Wait for my new plain colored blogger template.
      Thanks for your visit.

  2. This blog has lot of things to offer.. Lemmme call my fellow Nigerians...
    Thanks for the. Template

  3. Featured post showing blank after necessary changes

    1. If you make any mistake while doing changes then it will show blank otherwise it is working perfectly.

      So be careful when you are making changes.
      Thanks for comment.

  4. I did as you can I fix it coz I want to display only latest post there...

    1. There is no problem in widget code. You have to make change in listURL:"". Change with your blog URL.

      In Viral Grid Mag template we are using this widget as a Featured content and it is showing recent posts. So, why you want to add this gadget on your blog.

      I think if you are using Viral Grid-Mag template then there is no need to add this widget on your blog for showing recent posts. Because it can affect your blog loading speed.

      Yes, you can use this widget for showing Recent Posts from a Particular Label. If you want to show posts from particular label then you have to make changes like below method.

      In listURL:"", change with

      Hope you understand.
      Thank You!

  5. I mistakenly removed the one on viral mag ,so I replaced this code with vira mag html/ JavaScript gadget...i thought I can replace it...still trying to fix it

  6. Oh! Okay try it if you want any kind of help then contact us via email.

  7. Please I have tried it's showing blank (white) please my site URL Is please help me arrange the format

    1. URL's Permission is denied so I can't check it.

      Send us your template via email we will personally help you out of sure.

      Thank You for using Viral Grid-Mag.

  8. Yeah I will unlock site tomorrow...

  9. Bro this the last aspect remaining before unlocking the site...
    I reinstalled vira mag and am using the follow-come featured slider ..i changed only the url but nothing shows up...just tell me what you changed on your...please help

    1. If you are using Viral-Grid Mag then don't make changes in the section of featured posts.

      Just save the template and it automatically works for you on every blog. No need to add any URL inside listURL. Keep it as it is like below.


      If you face any problem please send us your template in which you have done customizations.


We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.