Efek Mouseover Gelap & Terang Di Gambar Blog

Nah Mari Kita Kembali Ke Tutorial Blogger Yakni Cara Menambahkan Efek Mouseover Pada Gambar Blog Atau Lebih Jelasnya Adalah Perbedaan Efek Gambar Saat Dan Sesudah Disorot Cursor Mouse. Mungkin Begitulah Kira Kira Dan Untuk Mempersingkat Waktu Kita Lansung KeTutorial Yang Saya Sudah Sertakan Dengan Contohnya.

Dibawah Adalah Contoh Gambar Dengan Efek Mouseover Beserta Kodenya.

Efek Gambar Gelap Ke Terang

<img src="URL GAMABAR SOBAT DISINI" style="opacity:0.4;filter:alpha(opacity=40)"onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"/>

Efek Gambar Terang Ke Gelap

<img src="URL GAMBAR SOBAT DI SINI" style="opacity=1;filters.alpha.opacity=100"onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40"onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"/>

Silahkan Sobat Simak keterangan Kedua Contoh Kode Diatas Dibawah ini:

• Kode Yang Berwarna Merah Adalah Kode URL Gambar Sobat.
• Kode Yang Berwarna Biru Adalah Style Atau Efek Awal Gambar Sebelum Disorot Cursor Mouse.
• Kode Yang Berwarna Hijau Adalah Style Atau Efek Gambar Bila Tersentuh Atau Disorot Cursor Mouse.
• Kode Yang Berwrna Ungu Adalah Style Atau Efek Gambar Sesudah Tersentuh Atau Disorot Cursor Mouse.

Dari keterngan Diatas Sobat Bisa Mengkreasikan Efek Sendiri Dengan Mengubah Ketiga Kode Yakni style onmouseover onmouseout Dan Apabila Sobat Ingin Menambahkan Semua Efek Mouseover Pada Semua Gambar Postingan Sobat Silhakan Simak Dibawah ini.

1. Login Ke Akun Blogger Sobat.
2. Masuk Rancanagan Lalu pilih Edit HTML Dan Awas Jangan Lupa Centang Expand Template Widget.
3. Kemudian Cari Kode .post img { Pada Template Sobat Dan Bila Tidak Ketemu Kode Yang Seperti itu Maka Sobat Carilah Kode ]]></b:skin> Dan Taruhlah Salah Satu Kode Dibawah ini tepat Diatasnya Kode ]]></b:skin> Kemudian Simpan Dan Lihat Hasilnya.
   • Efek Gelap Ke Terang
   .post img { opacity:0.4; filter:alpha(opacity=40) } .post img:hover { opacity:1; filters.alpha.opacity=100 }
   • Efek Terang Ke Gelap
   .post img { opacity:1; filters.alpha.opacity=100 } .post img:hover { opacity:0.4; filter:alpha(opacity=40) }
4. Bagi Sobat Yang Template nya Sudah Tersedia Kode .post img { Silahkan Masukkan Salah Satu Kode Dibawah Sebelum Kode Tutup Kurung }
   • Efek Gelap Ke Terang
   opacity:0.4; filter:alpha(opacity=40)
   • Efek Terang Ke Gelap
   opacity:1; filters.alpha.opacity=100
5. Selanjunya Taruh Salah Satu Kode Berikut ini Setelah Atau Dibawah Tutup Kurung }Kode Diatas Lalu Simpan Dan Lihat Hasilnya.
   • Efek Gelap Ke Terang
   .post img:hover { opacity:0.4; filter:alpha(opacity=40) }
   • Efek Terang Ke Gelap
   .post img:hover { opacity:1; filters.alpha.opacity=100 }
6. Selesai.

Selamat Mencoba Dan Semoga Bermanfaat

Liat juga Ya Di Cw4rt :