Recent Post Slider Update Otomatis Simple untuk blogger

recent post slider yang sangat sederhana banget, tanpa edit script template sobat

TutorialMixs- salam sejahtera selalu buat para blogger mania yang lagi doyan-doyannya memperbaiki tampilan blog sobat..
kali ini aku mo share sedikit pembahasan terkait recent post slider yang sangat sederhana banget, tanpa edit script template sobat, dengan tampilan yang tidak kalah inovatifnya dari berbagai style recent post yang ada..

ok langsung saja menuju ke topik..
1. langkah awalnya silahkan masuk ke blogger->layout-> add a gadget
2. pilih HTML/JAVA SCRIPT lalu klik aja
3. lalu kopi pastekan kode berikut

Berikut Scriptnya :

<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{width:100%;height:500px} 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX167PmxubIyYWKBSlR_hd8M-fPxSQt0wgpHE5cPXqYYyXKm0Q9_zunOAOPd8VQ2SOPcIjuqzXuKwmBu6hqKHatgQViqsLp9XVAdiZZrjb07wK26LAsMHgpkoDFGJSSC1hbuwVyU3MYPY/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} </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://makingdifferent.github.io/blogger-widgets/featuredposts.js" type="text/javascript"></script><script type='text/javascript'>//<![CDATA[ FeaturedPostSide({ blogURL:"http://tutorialmixs.blogspot.com", MaxPost:30, idcontaint:"#featuredpostside", ImageSize:300, interval:5000, autoplay:true, tagName:false }); //]]></script>

untuk blogeURL silahkan ganti dengan alamat blog sobat..

simple bukan? semoga bermanfaat deh

please visit at : 

http://www.makingdifferent.com/jquery-featuredrecent-posts-slider-widget-for-blogger/