Online Firmware: Cara membuat widget slide out CSS

Sunday, January 1, 2017

Cara membuat widget slide out CSS

Teknik untuk membuat widget slide out ini hanya menggunakan CSS tanpa javascript. Kode CSS dan HTMLnya sederhana

Ketika posisi mouse diatas gambar maka akan muncul slide widget.

HTML

<div id="slideout">
 <img src="url gambar" />
 <div id="slideout_inner">
 [masukkan kode widget disini]
 </div>
</div>

CSS

#slideout {
 position: fixed;
 top: 40px;
 left: 0;
 -webkit-transition-duration: 0.3s;
 -moz-transition-duration: 0.3s;
 -o-transition-duration: 0.3s;
 transition-duration: 0.3s;
}
#slideout_inner {
 position: fixed;
 top: 40px;
 left: -250px;
 -webkit-transition-duration: 0.3s;
 -moz-transition-duration: 0.3s;
 -o-transition-duration: 0.3s;
 transition-duration: 0.3s;
}
#slideout:hover {
 left: 250px;
}
#slideout:hover #slideout_inner {
 left: 0;

Masukkan kode CSS di atas kode ]]></b:skin> pada template blogger anda.

Untuk memodifikasi background abda bisa mengedit #slideout_inner. Untuk posisi edit top: 40px menjadi yang anda inginkan.

Nah sekarang bisa dicoba.

Available link for download