Add Randomly Shuffling Recent Post Widget in Blogger

Recently I posted the Random Post Widget for blogger that can show you random posts on every page refresh and that too you can choose how many random posts you wanted to see, well today I am posting another amazing Recent Posts widget that will shuffle up automatically and you can even choose how many random posts you wanted to show up. So as you can see in the image on the right 4 tiles will be displayed, but it has flexible width option so if you sidebar width is more then it will automatically adjust itself. You can also add this widget in your footer or anywhere else and it will automatically take that size.

Now this widget contains an awesome styling with the grey lining structure and your titles are displayed in the white color, now as soon as you hover on any tile it just brightens up and show you the title more clearly. So now if you wondering that this widget looks awesome well it feels awesome too, so just check out the below steps to add to your blogger blog, so I am not sure if it will work in wordpress blog or not but it will work in blogger really fine as I have tested it out.

1. Open Blogger > Layout > Add Gadget > HTML/JavaScript.
2. Now add below code into it.

   <style type="text/css">ul.abt-sidebar-slider *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}ul.abt-sidebar-slider{font:normal normal 11px Verdana,Geneva,sans-serif}ul.abt-sidebar-slider,ul.abt-sidebar-slider li{margin:0;padding:0;list-style:none;position:relative}ul.abt-sidebar-slider{width:100%;height:500px}ul.abt-sidebar-slider li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}ul.abt-sidebar-slider li:nth-child(1),ul.abt-sidebar-slider li:nth-child(2),ul.abt-sidebar-slider li:nth-child(3),ul.abt-sidebar-slider li:nth-child(4){display:block}ul.abt-sidebar-slider img{border:0;width:100%;height:100%}ul.abt-sidebar-slider li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}ul.abt-sidebar-slider li:nth-child(2){left:0;top:50%}ul.abt-sidebar-slider li:nth-child(3){left:50.5%;top:50%}ul.abt-sidebar-slider li:nth-child(4){width:100%;left:0;top:75%}ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider 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.abt-sidebar-slider .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq_TWFh7_W2cYhC6tKRYl800nrBkaMndQNqVpZ4wFrEl4beoVD2BGde4YOrDlQbaWNszF0lUGqxd-xH6PX_OHSFTkfrMqTz7dpFHBJ0XcUHGZyXbwCH3DTkroTfZ3Af5mowM09w083QbI/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider img{border:1px solid #2E8DCE;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}ul.abt-sidebar-slider li:nth-child(1) .overlayx{background-position:50% 25%}ul.abt-sidebar-slider .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.abt-sidebar-slider 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.abt-sidebar-slider li:nth-child(1) h4,ul.abt-sidebar-slider li:nth-child(4) h4{font-size:150%}ul.abt-sidebar-slider .label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size:90%}ul.abt-sidebar-slider li:nth-child(2) .autname,ul.abt-sidebar-slider 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}</style><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://goo.gl/O8CJeK" type="text/javascript"></script><script type='text/javascript'>//<![CDATA[
   FeaturedPostSide({blogURL:"http://www.hackinguniversity.in",MaxPost:8,idcontaint:"#Featuredpostside",ImageSize:300,interval:5000,autoplay:true,tagName:false});//]]></script>

3. Now just change the Blue URL line with your blog’s URL and if you need to change the posts count you can do that too by changing the blue numeric number.
4. Save the widget and align it to where ever you wanna display it out. That’s it now just refresh your blog and say Hi :) to your recent widget shuffling all over.