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(https://3.bp.blogspot.com/-1_Vnfz23h0E/V0m7kzHpgiI/AAAAAAAALlU/f763ScY-PBc2UnqNX3Tf20lyvHxtRo9qwCLcB/s400/overlay-bg.png);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}
</style>
<div id=”featuredbwidget”></div>
<link href=’https://fonts.googleapis.com/css?family=Abel’ rel=’stylesheet’ type=’text/css’/>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js” type=”text/javascript”></script>
<script type=’text/javascript’>
//<![CDATA[
featuredbwidget({
listURL:”https://www.mybloggerguides.com/”,
featuredNum:9,
listbyLabel:false,
feathumbSize:350,
interval:3000,
autoplay:true,
featuredID:”#featuredbwidget”
});
function featuredbwidget(a){(function(e){var h={listURL:””,featuredNum:3,featuredID:””,feathumbSize:300,interval:5000,autoplay:false,loadingFeatured:”nextfeatured”,pBlank:”https://3.bp.blogspot.com/-EOu4Rrgcryo/V0m8dV7MU1I/AAAAAAAALlg/4h5vQaHpQiMdkvtUdDbu0LtjJRvgPERYwCLcB/s500/no-image.png”,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+”//”+window.location.host:h.listURL)+”/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)};
//]]>
</script>

Required Editing:

  1. listURL: Replace “https://www.mybloggerguides.com/”, 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

Conclusion:

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!

Paramjot Singh
 

Hey, How you all are? Myself Paramjot Singh, A young (Not Old :P) addicted Blogger from Lucknow, India who want to learn Aha to Shit of the Blogging. I'm blogging since 2 years, and here on My Blogger Guides, I'm sharing my little mind knowledge which I learned in these past two years. :)

Click Here to Leave a Comment Below 14 comments
Jizal Kolassery - August 7, 2016

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 -www.appglaze.com
im from kerala by the way

Reply
    mbg - August 7, 2016

    @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.

    Reply
Precious Anya - August 19, 2016

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

Reply
Precious Anya - August 26, 2016

Featured post showing blank after necessary changes

Reply
    mbg - August 27, 2016

    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.

    Reply
Precious Anya - August 27, 2016

I did as you order…how can I fix it coz I want to display only latest post there…

Reply
Precious Anya - August 29, 2016

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

Reply
mbg - August 29, 2016

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

Reply
Precious Anya - August 31, 2016

Please I have tried it's showing blank (white) please my site URL Is http://Www.Romanticpie.com please help me arrange the format

Reply
    mbg - August 31, 2016

    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.

    Reply
Precious Anya - September 2, 2016

Yeah I will unlock site tomorrow…

Reply
Precious Anya - September 4, 2016

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

Reply
    mbg - September 5, 2016

    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.

    listURL:""

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

    Reply

Leave a Reply:

0 Shares
+1
Pin
Tweet
Stumble
Share
Share