tra-cyber.forumid.net
Welcome To Zone Chibi Cyber Community



 
HomeFAQSearchRegisterLog in

Share | 
 

 Membuat Mouse Hover Effect Pada Gambar Di Blogger

View previous topic View next topic Go down 
AuthorMessage
1Fps_Pro
Penduduk Chibi
Penduduk Chibi


Jumlah posting : 69
Points : 118
Reputation : 17
Join date : 2011-03-10
Age : 20
Lokasi : Cikampek

PostSubject: Membuat Mouse Hover Effect Pada Gambar Di Blogger   Sat Mar 19, 2011 12:16 pm

Cara kerja efek gambar transparan diatas tidak begitu sulit, yang kita perlukan hanya memanfaatkan properti CSS Image Opacity. Namun sebelumnya perlu juga diketahui property CSS opacity sebenarnya tidak termasuk dalam standar CSS, dimana property ini hanya bekerja dengan baik pada beberapa web browser modern saja ( dikutip : O-Om )

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.

Kalau postingan saya berguna silahkan klik tanda (+) di pojok kanan atas..
Thx.
Back to top Go down
 

Membuat Mouse Hover Effect Pada Gambar Di Blogger

View previous topic View next topic Back to top 
Page 1 of 1

Permissions in this forum:You cannot reply to topics in this forum
tra-cyber.forumid.net :: Hobby and Entertainment :: Computer :: Programming-
Jump to: