Selasa, 11 Juni 2013

Cara Memasang Efek Transparan pada Gambar di Blogger


Contoh efek transparan pada gambar yang dipasang pada blog. Gambar akan kembali terlihat jelas apabila pointer mouse diletakkan diatas gambar. (Gambar tidak terlihat? Klik kanan tulisan ini, lalu pilih
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!

Suka Artikel Ini? Yang Share Dapat Pahala Lho... Trims!

2 komentar:

  1. keren gan visit ya www.donesiarony.blogspot.com

    BalasHapus
  2. Mantab bro tutorialnya..terimakasih banyak
    http://obattraditional.com/

    BalasHapus

Kurang mengerti dengan artikel diatas, ingin menanyakan sesuatu yang kurang jelas atau ingin meninggalkan jejak? Silakan gunakan Kotak Komentar!. Jika Anda ingin meletakkan kode HTML pada kotak komentar, gunakan tools HTML Parser But, remember! Berkomentarlah dengan bahasa yang sopan, tanpa iklan, spam politik, porno, dan hal - hal negatif lainnya. Terima kasih!