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>