Cara Membuat Resent Post Slider Bergerak Pada Blog

Ingin blog tampil lebih menarik?khususnya yang sering membagikan gambar atau desain rumah,logo,photoshop,nah kali saya akan membagikan widget sangan menarik dengan animasi slider tiap detik berganti,ukuran resize besar namun tidak terlau besar cukup untuk sidebar blog,dan tampilan kotak bergerak naik dan berputar.

1.login blog anda.
2.Masuk tata letak dan tambahkan widget html.
3.copy code dibawah ini dan pastekan.
4.Edit codenya ganti url blog saya dengan blog anda dan MaxPost:3 edit berapa post untuk ditampilkan.

<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/AVvXsEiKd01QSdJAg9MzIfhwY9vUn6hu6Dqi9ByZk1s_kpgBFtxShY7q9ts7-pZ9hAjwmxVJl_zslJGYUySXr4qncY4qwIhDgkiM_2mJ1kVhyD3WMLsTkZCmW4PjcrvHTbL3vUdAYXXAvqinUGI/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://infonyagratis.blogspot.co.id/",MaxPost:3,idcontaint:"#Featuredpostside",ImageSize:300,interval:5000,autoplay:true,tagName:false});//]]></script>

Jangan lupa klik simpan dan lihat hasilnya.