Cara Memasang Efek Transparan pada Gambar di Blogger

Cara Memasang EfekTransparan pada Gambar di Blogger – Ada banyak efek CSS yang dapat dipasangkan pada gambar di blog. Seperti efek zoom gambar yang pernah saya bahas beberapa waktu yang lalu. Kali ini topiknya tidak jauh – jauh dari CSS, yaitu efek transparan pada gambar di blog. Efek ini akan memberikan kesan transparan saat pointer mouse tidak diletakkan diatas gambar. Gambar akan kembali terlihat jelas apabila pointer mouse diletakkan diatas gambar.

Untuk preview-nya, silahkan lihat disini.

Pada dasarnya, kode CSS efek transparan pada gambar ini tidak jauh berbeda dengan kode CSS untuk efek yang pernah saya bahas sebelumnya. Perhatikan kode CSS dibawah ini :

.brl-transparan {opacity: 0.5;filter:alpha(opacity=50);}
.brl-transparan:hover {opacity:1.0;filter:alpha(opacity=100);}

Kode tersebut jika dipasangkan akan memberikan efek seperti pada preview diatas. Untuk mengubah transparasi gambar, gantilah variable opacity: 0.5 dan opacity=50 pada baris pertama. Untuk opacity: 0.5 Anda dapat menggantinya dengan angka yang lebih kecil dari 1.0. Sedangkan untuk opacity=50, Anda dapat menggantinya dengan angka bernilai lebih kecil dari 100. Kedua kode tersebut berfungsi untuk menentukan seberapa transparan gambar Anda nantinya. Anda dapat mengubahnya, atau membiarkannya seperti semula.

Untuk memasang efek tranparan pada gambar di blog Anda, ikuti langkah – langkah dibawah ini :

1.     Buka akun blogger Anda, lalu klik Template.

2.     Buat sebuah backup / cadangan dari template blog Anda.

3.     Lalu klik Edit HTML.

4.     Klik kotak dengan kode HTML yang muncul, lalu tekan ctrl+f.

5.     Carilah kode ]]></b:skin>, lalu pastekan kode CSS berikut ini tepat diatas/sebelum kode ]]></b:skin>.

.brl-transparan {opacity: 0.5;filter:alpha(opacity=50);}
.brl-transparan:hover {opacity:1.0;filter:alpha(opacity=100);}

6.     Terakhir, klik Simpan Template.

Sedangkan, untuk mengaplikasikan kode CSS ini pada gambar di blog Anda, tambahkan kode class=’brl-transparan’ pada HTML gambar. Contoh pemasangan efek transparan pada kode HTML gambar di blog :

<img class=’brl-transparan’ border=’0’ src=’http;//urlgambar.anda’ />

Untuk memasang kode CSS ini pada link tambahkan kode class=’brl-transparan’ setelah <a.

Contoh :

<a class=’brl-transparan’ href=’http://urlgambar.anda’ ... />

Selamat mencoba, dan salam blogger!