Saturday, December 17, 2011

Home » , » Cara Jadikan Image Dalam Entri Blog Jadi Kabur a.k.a Image Opacity Effect

Cara Jadikan Image Dalam Entri Blog Jadi Kabur a.k.a Image Opacity Effect

Share

 Tudiaaa..Lama dah tuan tanah tak buat tutorial pasal blog ni hangpa tau dak. Kali ni nak buat tutorial supaya jadikan image/gambar dalam entri blog korang ada kesan kabur bila mouse diletakkan pada gambar tu. Nak tengok contoh boleh letak mouse kat gambar bawah ni:


Cute tak gambo kucing ni?Macam ikan buntal pun ado ye dak? Hehe


Ok la.Kalau korang rasa blog korang pun nak bagi jadi macam tu, ikut la langkah-langkah kat bawah ni k.

Mula-mula masuk ke bahagian Dashboard > Design > Add A Gadget > Pilih HTML/Javascript

Lepas tu copy coding kat bawah ni masuk kat dalam HTML/Javascript tu
 
<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>


Kemudian Save.

Senang je...Jadi tak????Kalau jadi ce cite^_^


Jom test drive Volkswagen dan menang Ipad 2. Klik la tengok

4 comments:

Izzat Aziz said...

dah guna HTML 5 dah.. :)
Banyak effect menarik html 5 ni.

khuzai said...

alhamdulillah,jadi akk buat terima kasih..

n.ashwad anuar said...

boleh ubah efek lain tak selain opacity 2 ?

mimi saufi said...

x jd la... :((

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

Singgah je???Komen la sikit.:-D

Related Posts Plugin for WordPress, Blogger...

Artikel Sensasi

Blog Archive