Recent Post Slider Widget For Blogger

Ok sobat pada kesempatan ini kami akan membagikan lagi sebuah widget slider keren yaitu recent post slider widget yang dapat anda letakan dimana saja di blog anda karena widget ini responsive dan mempunyai lebar 100%. Tapi yang paling cocok menurut kami jika anda meletakanya ke sidebar blog, agar supaya blog anda kelihatan lebih cantik dan memiliki daya tarik tersendiri dan karena memang widget ini lebih cocok diletakan disini.

Widget ini juga dapat di setting untuk menampilkan artikel terbaru di blog anda atau jika anda menginginkan untuk menampilkan widget dengan label / kategori tertentu di blog anda juga dapat mensettingnya, misalnya jika anda ingin menampilkan postingan dengan label " Blog " maka anda tinggal mensettingnya dan hasilnya posting yang akan di tampilkan adalah yang berlabel "Blog".

Ada juga widget yang seperti ini yang sudah pernah kami bagikan hanya bedanya widget ini memanjang ke samping berbeda dengan widget di bawah ini, jika anda tertarik silahkan baca artikel kami yang berjudul cara membuat responsive recent post slider. Nah jika anda tertarik dengan widget ini silahkan ambil kodenya dan pasang ke blog anda.
1. Login dengan ke blog anda
2. Masuk ke menu Tata Letak >> Tambah Gadget >> Html/JavScript.
3. Masukan kode dibawah ini.

<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(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}
</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="https://sites.google.com/site/seocips/seocips-script/recentpost-slide.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://blog.spezer.net/",
 MaxPost:10,
 idcontaint:"#featuredpostside",
 ImageSize:300,
 interval:5000,
 autoplay:true,
 tagName:false
});
//]]>
</script>

Nah jika semuanya sudah sesuai dengan keinginan sobat tinggal save dan cek hasilnya di blog. Bagaimana hasilnya? keren gak? nah sekian recent post widget yang dapat kami bagikan untuk saat ini dan jika sobat masih tertarik dengan widget lainya maka sobat dapat melihat kumpulan widget seocips.com. Ok semoga bermanfaat.

By Brando Mewo