TUTORIAL : IMAGE OPACITY EFFECT

Hye...lame kan tak update sal tutorial...mlm nie mirul nak ajar korang cara buat opacity effect kat image dalm blog korang...ade 2 effect tau..ok mirul ajar satu-satu okei :)

Image opacity effect 1
image menjadi pudar apabila cursor mouse diletakkan ke atas gambar.

Image opacity effect 2
kesan adalah sebaliknya, iaitu image asal yang pudar bertukar terang dan jelas apabila cursor mouse diletak di atas image tersebut.

Mudah je nak pasang Image opacity effect nie. ikot je step :).

Langkah 1

Login Blogger Dashboard --> Design --> Add A Gadget --> HTML/Javascript

Langkah 2

Copy salah satu kod di bawah dan paste pada content HTML/Javascript.

Kod Image opacity effect 1




<style> /* ----- Image opacity effect 1 ----- */ .post a img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; -khtml-opacity: 1.0; } .post a:hover img { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5; } </style>

Kod Image opacity effect 2




<style> /* ----- Image opacity effect 2 ----- */ .post a img { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5; } .post a:hover img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; -khtml-opacity: 1.0; } </style>

pas 2 klik Save. siap :)