Kebebasan untuk Pemula

Flowblade video editor 1.8 telah dirilis. Lihat catatan rilis

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.

0 komentar:

Posting Komentar

Centang "Beri tahu saya" untuk menerima balasan via email

Back to Top