
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
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>
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)
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"