Cara Membuat Efek Image Opacity

Cuba anda perhatikan gambar tersebut dan bawak mouse ke gambar tersebut

Itu adalah efek image opacity (opacity effect). Efek tersebut akan mampu mempercantik blog anda. Siapa yang ingin boleh ikuti tutorial dibawah ini:

Langkah 1
1. Login ke Blogger
2. Masuk ke Rancangan, Edit HTML
3. Cari kode </head>
4. Di atas / sebelum kode </head> pastekan kode berikut:


<style type='text/css'> a.opacity img { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5;} a.opacity:hover img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; -khtml-opacity: 1.0; } </style>

5. Simpan

Langkah 2
1.Jika anda ingin letak gambar anda perlu tambahakan kode class="opacity" ,

Contoh:

Kode image awal:

<a href="http://1.bp.blogspot.com/_XoMK3ToWnac/........./blogger.jpg" imageanchor="1"

style="margin-left: 1em;"><img border="0" src="http://1.bp.blogspot.com /..... blogger.jpg" /></a>



Tambahkan class="opacity" menjadi:

<a class="opacity" href="http://1.bp.blogspot.com/_XoMK3ToWnac/........./blogger.jpg"

imageanchor="1" style="margin-left: 1em;"><img border="0" src="http://1.bp.blogspot.com /.....


blogger.jpg" /></a>


Semoga berjaya