Cara pasang Image opacity effect


Image opacity effect adalah suatu kesan atau efek yang berlaku apabila cursor mouse diletakkan di atas sesuatu image yang terdapat pada bahagian post.

Terdapat dua efek yang boleh anda pilih untuk digunakan pada blog.

Untuk Image opacity effect 1, image menjadi pudar apabila cursor mouse diletakkan ke atas gambar. Untuk demo, anda boleh lihat efeknya pada gambar di atas.

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

Cara untuk memasang Image opacity effect ini sangat mudah. Hanya ikut beberapa langkah di bawah.

Langkah 1

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

Langkah 2

Copy salah satu kod di bawahdan 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>

Akhir sekali, klik Save.

p/s:Jika anda mahu meletak kod tersebut pada script template, sila paste kod tersebut di atas kod ]]></b:skin>


{ 17 comments.. read them below or add one }

Belle ! Belle ! 6:50 PM
Wah..dah lame cari benda ni :) Terima kasih :D
Abu Tsabit Abu Tsabit 6:17 AM
syukron,, tutorial yang bagus
admin admin 3:09 PM
terima kasih tuan :)
ecah ecah 1:22 AM
terima kasih daun keladi, lain kali buat lagi..
LuckyStuff LuckyStuff 12:03 AM
tengkiu so much..terbaek..
LuckyStuff LuckyStuff 12:05 AM
mcmn wat profile pict utk commenter tu senget? tengkiu
kikin! kikin! 8:31 PM
nice sharing bro!
THUMBS UP! :)
Yastro Yastro 3:08 PM
Thanks bro...saya test dulu...tengok2 dlm 2/3 ari nih.
Hotel Jakarta Terbaik Hotel Jakarta Terbaik 11:46 AM
Mantab, dicoba langsung bisa!
Tax Consultant Tax Consultant 4:18 PM
Thanks for the info.
Rafique Niihara Rafique Niihara 6:05 AM
em... tak menjadi kat blog saya... kenapa ya ? http://muhammadrafik.blogspot.com ... dah try add HTML dan edit template skali.. sama jugak hasilnya...