Cara Membuat Efek Hover Gambar di Semua Postingan


Sobat Bloger.. Tips di bawah ini adalah tentang cara membuat Gambar berubah saat mouse diarahkan tepat pada gambar. Khusus untuk tutorial ini, saya memberikan efek Hover Transparan. untuk Contohnya bisa dilihat pada blog ini dimana setiap postingan yang memiliki gambar akan berefek Hover.

Gak usah banyak koment, langsung aja mari kita ikuti caranya seperti berikut :
  1. Pertama silahkan Login ke blogger
  2. Masuk ke Tata Letak
  3. Pilih menu Edit HTML
  4. Centang Expand Template Widget
  5. Kemudian carilah kode ]]></b:skin> ( gunakan Ctrl F untuk mempermudah )
  6. Copy Pastekan kode di bawah ini, tepat di atas kode ]]></b:skin>
.post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}
.post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}
Terakhir Simpan Template dan lihat hasilnya.

Bagaimana, mudah kan. Silahkan dicoba dan salam Bloger..


Label: