Featured Post Slider
I had published stylish recent/featured posts widget version 1 & version 2 in older posts, if you are new here then you should check it, and today I’m going to share another featured post slider widget for blogger/blog. this widget will work with all type of blog, you can add this widget to anywhere on your blog like above title of the post (In first post only), sidebar, footer, because this widgets width is 100% that mean it will be fit with anywhere, but i recommended you to add this widget at sidebar. you can also show that featured posts from any particular category/label of your post. as example if you want to show posts from 1 category “Blogger” then all post will shown from “blogger” category. or you can use it as recent posts/featured posts, also you can choose that how many post you want to shows in to widget, that mean this widget is fully customized and customizable for you, I’m also use this widget in my another blog you can check it as a demo, if you want to add this widget to your blog then follow the below simple steps and add it your blog after adding the widget kindly share your experiences and suggestion with us by commenting below.

Also Read:- Stylish Recent Posts Widget With Thumbnail From a Particular Label


How to install this widget to blogger?

  • As usual go to blogger–>layout–>add a gadget
  • Choose HTML/javascript from the list
  • Copy and paste below code on it
<style type="text/css">
ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
ul.rcentside{font:normal normal 11px Verdana,Geneva,sans-serif}
ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative}
ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}
ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4){display:block}
ul.rcentside img{border:0;width:100%;height:100%}
ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}
ul.rcentside li:nth-child(2){left:0;top:50%}
ul.rcentside li:nth-child(3){left:50.5%;top:50%}
ul.rcentside li:nth-child(4){width:100%;left:0;top:75%}
ul.rcentside .overlayx,ul.rcentside li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-image:url(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}
ul.rcentside .overlayx,ul.rcentside img{border:4px solid #000000;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
ul.rcentside li:nth-child(1) .overlayx{background-position:50% 25%}
ul.rcentside .overlayx:hover{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
ul.rcentside h4{position:absolute;bottom:30px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:Georgia,Times,"Times New Roman";font-weight:normal}
ul.rcentside li:nth-child(1) h4,ul.rcentside li:nth-child(4) h4{font-size:150%}
ul.rcentside .label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size:90%}
ul.rcentside li:nth-child(2) .autname,ul.rcentside li:nth-child(3) .autname{display:none}
.buttons{margin:5px 0 0}
.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
<div id="featuredpostside"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://makingdifferent.github.io/blogger-widgets/featuredposts.js" type="text/javascript"></script>
<script type='text/javascript'>


These are the 1 time settings you may apply.
blogURL      = Add your blog URL here
MaxPost       = The total no. of posts in the slider
Interval         = Time taken to change the slides position in milliseconds
autoplay        = Write true or false in you want / don’t want the slides to change automatically.
tagname        = If you want to display articles by tag / label, such as the tag Blogger, it will be written as tagname: “Blogger”

  • Now save the widget and see the result :D