1News Online:
Home » » Tutorial Blog - Cara pasang Image opacity effect

Tutorial Blog - Cara pasang Image opacity effect

Wednesday, October 31, 2012 | 5:27 AM



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>
Kongsi artikel ini : :

Post a Comment

 
Copyright © 2012. 1News Online - All Rights Reserved
Proudly powered by Blogger