Recent Post Slider Widget For Blogger
Recent Post For Blogger – Berikut ini adalah widget recent post dengan efek slide yang dapat anda pasang pada blog anda. Simak artikel seocips berikut ini.
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.

Recent Post Slider Widget For Blogger

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://www.seocips.com/",
 MaxPost:10,
 idcontaint:"#featuredpostside",
 ImageSize:300,
 interval:5000,
 autoplay:true,
 tagName:false
});
//]]>
</script>
blogURL : Ganti dengan url / alamat blog sobat.
MaxPost : Jumlah postingan yang akan di tampilkan oleh slider.
Interval : Waktu dari efek slide dalam milliseconds
autoplay : Bisa diganti "true" atau "false" ( tanpa tanda kutip ) efek slide otomatis atau tidak.
tagname : Ini jika anda ingin menampilkan widget dengan label tertentu, misalnya ingin menampilkan widget dan label " Blog " isi tagName dengan tulisan " Blog " (tanpa tanda kutip)

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.
0 Komentar untuk "Recent Post Slider Widget For Blogger"