BelajarBlogs

Image opacity effect ialah efek yang berlaku apabila cursor mouse diletakkan di atas sesuatu image yang terdapat pada bahagian post.

Tutorial ini membuatkan gambar menjadi pudar apabila cursor mouse diletakkan ke atas gambar.


Langkah 1

1. Login ke Blogger, Klik Design :

2. Pada Elemen Halaman, klik Add Gadget di lokasi yang Anda ingin letak;
3. Pilih HTML/Javascript;

Langkah 2
Copy kode dibawah ini dan letakkan dalam kontent yang telah anda buka tadi.

<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>

Selepas itu klik Save dan anda boleh lihat hasilnya..