Efek Hover Gambar, Redup dan Terang

Salam Blogger!!! Dah lama nih nggak ngepost, bukan karena kehabisan ide, hanya karena malas jika harus memposting melulu. Maka dari itu, saya putuskan untuk ngepost seminggu sekali, yaitu pada hari Minggu, dan jika ada kesempatan saya bisa posting dua kali atau tiga kali seminggu. Ya doakan saja supaya blog ini bisa tetap update.

Pada postingan tempo dulu saya pernah membahas efek timbul pada gambar. Dimana pada gambar tersebut jika kursor mouse melintas diatas gambar tersebut akan tampak tenggelam seperti relief. Nah, pada kali ini saya juga akan memberikan efek hover pada gambar yaitu pada kondisi biasa gambar akan terlihat seperti apa adanya, tetapi jika mouse melintas diatasnya maka gambar akan terlihat redup. Seperti gambar diatas, contohnya.

Pertama-tama siapkan satu set komputer atau laptop. Boleh ke warnet dulu, atau minjem punya orang. Asal jangan komputer hasil maling aja karena hukumnya haram. Dan juga harus ada koneksi internet (kalau tidak ada gimana mau modifikasi template di blog? ). Kalau sudah ada, kita mulai.

1. Pertama-tama, kita harus login ke Blogger. Lalu klik Tata Letak lalu pilih menu Edit HTML.

2. Backup template anda terlebih dulu.

3. Cari kode ]]></b:skin>.

4. Diatasnya, ketikkan kode berikut.

.redup, img.redup{
opacity:1;
filter:alpha(opacity=100,finishedOpacity=100);
border:0;
}
.redup:hover, a:hover .redup{
opacity:0.5;
filter:alpha(opacity=0.5,finishedOpacity=0.5);
}

5. Lalu? Klik Simpan Template.

Untuk memasukkannya ke blog, ikuti langkah-langkah berikut. Masih di tab Tata Letak, klik menu Elemen Halaman. Lalu klik Tambah Gadget, pilih yang HTML/Javascript, lalu di bagian isi ketik:

<a href="LINKYANGDIINGINKAN"><img src="URLGAMBAR" class="redup"/></a>

Ket: LINKYANGDIINGINKAN adalah link yang diinginkan, jika diklik akan membuka suatu halaman situs/halaman web. Sedangkan URLGAMBAR adalah URL dari gambar. Kalu sudah, klik Simpan.

Anda juga memasukkannya di postingan dengan memasukkan kode yang sama dengan kode diatas pada mode Edit HTML.

Sedikit info di hari minggu. Terima kasih atas perhatiannya dan semoga bermanfaat.

Apabila anda menyukai postingan ini, anda bisa men-sharenya ke yang lain. Semisal ke Facebook atau Twitter. Silakan klik salah satu pilihan dibawah.

Artikel Menarik Lainnya