Membuat Efek Hover Pada Gambar Tertentu

Salam Blogger Mania!!, whehe lama kagak tulis artikel tentang blogspot ya?? wkwkwkwk saya lagi kecanduan ma game terus jadi lupa update blog. Sory sob !! Oke sekarang saya cuma mau share aja tentang cara membuat efek hover pada gambar yang kita tentukan saja (tidak semuanya). Nah bagi yang sudah tau jangan marah ya :) !!. Ini bagi yang belum tau saja. Nah, sebelum kita ke permasalahannya, saya akan terangkan apa itu sebenarnya efek hover? Efek hover itu semacam gambar yang kalau kita sentuh akan berubah warna atau bisa dikatakan (Pada kondisi biasa gambar akan terlihat seperti apa adanya, tetapi jika mouse melintasi gambar tersebut, maka gambar itu akan berubah warna-redup & terang-.)

Jika masih bingung, mari kita lihat contohnya saja.

Gambar yang tidak memiliki efek Hover :



Gambar yang memiliki efek Hover :



Sudah jelas kan? Nah, kalau sudah kita akan ke cara-cara pembuatannya.

1. Login ke Blogger
2. Pergi ke Rancangan --> Edit HTML --> centang "Expand Template Widget"
3. Cari Kode ]]></b:skin>
4. Kemudian masukkan kode berikut di atas kode tadi :

.linkopacity img {filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; border:0;}
.linkopacity:hover img {filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.3;border:0;}

5. Klik Simpan Template

Untuk memasukkan efek hovernya, tinggal tambahkan kode berwarna merah seperti di bawah ini.

Gambar dengan link :

<a href="http://caraindra.blogspot.com/" class="linkopacity"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzChFKXqMZcZlxlpH8YadhTeyTjW_j13cZdGtSK61LL24rC4PzfZW25DL0nEtH0tP6kAh0q_hgvmy6oTL3fpvq4awUawHF8K9Yb7RzRecwU6VUvSsPBH4-Yqqb8zY2a80EgFmizrmFKdF-/"></a>

Gambar tanpa link :

<a href="#nogo" class="linkopacity"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzChFKXqMZcZlxlpH8YadhTeyTjW_j13cZdGtSK61LL24rC4PzfZW25DL0nEtH0tP6kAh0q_hgvmy6oTL3fpvq4awUawHF8K9Yb7RzRecwU6VUvSsPBH4-Yqqb8zY2a80EgFmizrmFKdF-/"></a>

Selamat Mencoba, Salam Blogger !!