Jumat, 18 Maret 2011

0 Membuat Mouse Hover Effect Pada Gambar Di Blogger



Atau biar lebih jelaz coba aja lihat contoh gambar dibawah ini, hasil dari Effect MouseOver opacity pictures (tunjuk Gambar dengan mouse agar terlihat effect opacity nya) :

1. Mouse OverEffect Opacity imageI ( Opacity dari Buram ke Jelaz )



Untuk membuat Effect Opacity gambar diatas copy script dibawah ini :

<img src=”Masukkan URL Gamabar Anda Disini” style=”opacity:0.2;filter:alpha(opacity=40)”onmouseover=”this.style.opacity=1;this.filters.alpha.opacity=100″onmouseout=”this.style.opacity=0.4;this.filters.alpha.opacity=40″ />

2. Mouse OverEffect Opacity image II ( Opacity na dari Jelaz ke Buram )


Untuk membuat Effect Opacity gambar diatas copy script dibawah ini :

<img src=”Masukkan URL Gamabar Anda Disini” border=”1″ style=”opacity:1;filter:alpha(opacity=100)”onmouseover=”this.style.opacity=0.4;this.filters.alpha.opacity=40″onmouseout=”this.style.opacity=1;this.filters.alpha.opacity=100″/>

tetapi ini mungkin tidak akan support sama semua browser, tapi kalo browser modern seperti MOzilla Firefox n dll pasti bisa

Nahh.. ini ada trick lagi, seanfainya kita tiap posting harus nempelin kode tersebut satu persatu pastilah menyita waktu kan ?? sekarang Bagimana kalo kita ingin semua gambar di posting anda ingin seperti keadaan diatas?

Ikuti langkah-langkah berikut :

1. Login ke blogger sobat

2. Pilih Rancangan (tata letak)

3. Klik Edit HTML

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

5. Lalu Simpan kode dibawah, tepat diatas kode : ]]></b:skin>
.post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}
.post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}
6. Kalau sudah Simpan Template, dan lihat hasilnya.

0 komentar:

Posting Komentar

Kalau Comment Jangan Junk Ya

Free Blog Promotion

Untuk mengatur bagaimana tampilan tooltip tersebut nantinya, maka disini memerlukan kode style. Kode yang diperlukan seperti berikut ini.