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.

Tweet