Masa untuk tutorial. This time nak ajar korang buat image opacity effect kat blog korang. Hoho suke tak suke tak? Ok tak suke. You all tau tak ape bende image opacity effect tu? Kalau yang dah tau, sila main jauh-jauh. Kalau yang tak tau, boleh datang dekat tapi jangan pegang-pegang ok. Boleh pandang-pandang, jangan pegang-pegang *sudah mula mengarut.
Image opacity effect ni ade 2 jenis tau. Tau tak tau tak? Haa tak tau kan :p
Jenis pertama : Bila korang letakkan cursor mouse kat gambar, die jadi pudar.
Jenis kedua : Bila korang letakkan cursor kat gambar yang pudar, die jadi terang dan jelas.
Ok I sudah inform jenis-jenis die, sekarang jom tengok cara-cara die ;
Step 1
Dashboard > Design > Add Gadget > Html/Javascript
Step 2
Copy salah satu kod effect yang korang nak gune dan pastekan kat kotak gadget Html tu.
Ni kod effect yang pertama :
<style>Ni kod effect yang kedua :
/* ----- 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>
<style>Step 3
/* ----- 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>
Dah siap copy paste? Save dan tengok hasil die :)
