How to add Stylish Slider in Blogger | How to add Post Slider in Blogger

 

Hi to all in this article I am going to tell you all about how to add stylish post slider in blogger website easily in just few minutes.

So, interested can follow the below provided steps and can add this stylish slider in your website to attract new visitors and read the below steps carefully and completely to get clear understanding on adding slider.

What is the use of Post Slider in Blogger ?

Basically by adding this stylish slider in your website will give good user experience, and users will also click on it more when compared to other post, here you can add your recent post or popular post, so that your visitors can read the content.

How I get code for this stylish slider for WordPress ?

There are so many different types of plugins available in WordPress plugin store, you can install and activate them, and few slider plugins are given below:

• Smart Slider 3
• Meta Slider
• Slider Revolution
• Slide Anything
• Master Slider
• Soliloquy
• More..

Use the above plugins to add slider in your WordPress website.

How to add Stylish Slider in Blogger | How to add Post Slider in Blogger

Steps to add Stylish Post Slider in Blogger

---

Step-1: First of all you need to login to your blogger website dashboard by using your login credentials.

Step-2: Click on Theme -> Customize -> Backup Theme -> Download Theme.

Step-3: Now go back to blogger dashboard.

Step-4: Now copy the below code.

<!--[ Change your website URL & Others in the below code before ading code ]--> <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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjKPcz6MBNfK5OEMQbws3ND8uyAkInULqrPKqzl5D-ZZG9-oMcZ_HElVYAGyoNZzdz2eZw6cMlUo4BeLRvYcmQtbCXIzZpQUHIJzY_UnepuJWsTetZzkXo5_UZkduFSLXYXUZx06aau3I/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://sample.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgldlsi9fPLe_86OaxEM5Fgmwzpk66AfQfbsX8TUIZIAUhyphenhyphensn9aN6itNFksE7jT13PL1Yf-WljagnYHYGQWsFjUlsP-oGtm6afv_GorxBi3APdNQ7Sd0QfAFcLfYEXCk0dwf3wpDaX06JY/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>
Copy

 

Step-5: Now paste the code in notepad or any code editor and need to edit the code.

Changes you need to do in the code:

listURL: https://example.com [Add your website URL].

featuredNum: 5 [how many posts you need to display].

listByLabel: false [add label to display label posts].

feathumbSize: 350 [size of your slider].

interval: 5000 [In how many seconds the next post displays in slider].

autoplay: True [if false then users need to manually click on next button to change post and if True then the slider automatically slides the post].

Step-6: After modifying the code copy the entire code.

Step-7: Now click on Layout -> Add a Gadget -> HTML/JavaScript and add the copied code in the content box and click on save button.

Step-8: Now you have successfully added stylish slider in your blogger website, you can visit your website to test this slider working or not.

Note:

If slider is not showing your posts then you need to check once, whether you have changed demo URL with your website URL or not.

If you see any issue then restore you backup code and follow the above provided steps again and add the code in your slider or any other section.

Conclusion

---

So this how you need to add stylish post slider in your blogger website, if you face any issues in the code, let me know through contact us page.