Halo sobat SEOnesia, pada kesempatan kali ini kami akan membagikan lagi sebuah widget slider keren yaitu widget recent post slider yang dapat diletakkan dimana saja sesuai dengan keinginan, hal ini dikarenakan widget yang kami bagikan ini bersifat responsive artinya dapat menyesuaikan lebar kecilnya ketersediaran ruang yang ada. Tapi yang paling cocok menurut kami jika anda meletakkanya ke sidebar blog entah itu sebelah kanan ataupun sebelah kiri, agar blog kamu kelihatan lebih cantik dan keren sehingga memiliki daya tarik tersendiri.
 |
| Recent Post Widget Slider |
Widget ini juga dapat di setting untuk menampilkan artikel erbaru di blog kamu atau jika kamu menginginkan untuk menampilkan widget dengan label atau kategori tertentu di blog kamu juga dapat mensetting, misalnya jika anda ingin menampilkan postingan dengan label "Tips Blog" maka anda tinggal mensettingnya dan hasilnya postingan yang akan di tampilkan adalah yang berlabel "Tips Blog"
Ok langsung saja, jika kalian meraasa tertarik dengan kesaktian widget ini langsung saja ikuti lagkah-langkah yang telah kami sajikan dalam berikut ini.
Membuat Recent Post Slider Widget
1. Login terlebih dahulu ke akun blog kalian
2. Masuk ke menu Tata Letak >> Tambah Widget >> HTML/JavaScript
3. Masukkan 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZK2HaY20pqUgebRgbVZthF33QPS0rIlPNtzNwI1UYTvXPzzYf3Sfm3xUsFWujdfpolJN0CjSOfn3hsg3bIBoyR_Vj0JkMS52pRzymQweATaToRcIGXf_PiKhlVbba6K7YZInckpgN5vQ/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://ideseonesia.blogspot.co.id/",
MaxPost:5,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>
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/AVvXsEhZK2HaY20pqUgebRgbVZthF33QPS0rIlPNtzNwI1UYTvXPzzYf3Sfm3xUsFWujdfpolJN0CjSOfn3hsg3bIBoyR_Vj0JkMS52pRzymQweATaToRcIGXf_PiKhlVbba6K7YZInckpgN5vQ/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://ideseonesia.blogspot.co.id/",
MaxPost:5,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>
Keterangan:
- blogURL : Ganti dengan url / alamat blog sobat
- MaxPost : Jumlah postingan yang akan ditampilkan oleh slider
- Interval : Waktu dari efek slide dalam kecepatan milliseconds
- autoplay : Bisa diganti dengan "true" atau "false" (tanpa tanda kutip)
- tagname : Ini jika kamu ingin menampilkan widget denagab label tertentu, misalnya menampilkan widget dan label "Tips Blog" isi tagName dengan tulisan "Tips Blog" (tanpa tanda kutip)
Jika semuanya sudah anda sesuaikan dengan keinginan sobat SEOnesia sekalian, sobat tinggal klik tombol save/simpan dan cek hasilnya di blog sobar. Ok semoga bermanfaat.
EmoticonEmoticon