Blog Tutorial:Special Efek Pada Gambar
Ini ada sebuah tutorial yang mudah dan best untuk korang,letakkan efek fade in pada gambar korang,gerakkan mouse korang kat gambar demo di bawah
Cara-cara nak buat amat mudah,copy salah satu kod pilihan anda,atau nak ambil dedua pun boleh,dan pastekan sebelum/diatas kod ]]></b:skin>
Kod Untuk Fade In Style 1
Kod Untuk Fade In Style 2
Save template dan sekarang,bila korang ada gambar yang korang nak letak efek ni,korang kena buat camni
Contoh Lihat Gambar Ni:
Ini merupakan kod biasa bagi gambar diatas:
Ok,sekarang untuk letakkan efek,Cuma Perlu Tambahkan Perkataan class="Fadein" bagi style 1 atau class="Fadein2" bagi style 2
Hasilnya:
Demo:Efek Fade In Style 1
Demo:Efek Fade In Style 2
Cara-cara nak buat amat mudah,copy salah satu kod pilihan anda,atau nak ambil dedua pun boleh,dan pastekan sebelum/diatas kod ]]></b:skin>
Kod Untuk Fade In Style 1
.Fadein{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.Fadein:hover{
filter:alpha(opacity=50);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.Fadein:hover{
filter:alpha(opacity=50);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
Kod Untuk Fade In Style 2
.Fadein2{
filter:alpha(opacity=50);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.Fadein2:hover{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
filter:alpha(opacity=50);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.Fadein2:hover{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
Save template dan sekarang,bila korang ada gambar yang korang nak letak efek ni,korang kena buat camni
Contoh Lihat Gambar Ni:
Ini merupakan kod biasa bagi gambar diatas:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMi-CdI42pU9E1As14tm5DOpeyUBfzDXLhJQL8RMTjFxQQn1m7wqwds8GGHGuxsBaa5gzNSeZl4bSIY-WeZRByn_seTyxR91fRNWdRFvdVu958bTKj0pb0xunHboQt72o5wu6sdeYBe_U/s1600/blog_icon.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMi-CdI42pU9E1As14tm5DOpeyUBfzDXLhJQL8RMTjFxQQn1m7wqwds8GGHGuxsBaa5gzNSeZl4bSIY-WeZRByn_seTyxR91fRNWdRFvdVu958bTKj0pb0xunHboQt72o5wu6sdeYBe_U/s320/blog_icon.gif" /></a></div>
Ok,sekarang untuk letakkan efek,Cuma Perlu Tambahkan Perkataan class="Fadein" bagi style 1 atau class="Fadein2" bagi style 2
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMi-CdI42pU9E1As14tm5DOpeyUBfzDXLhJQL8RMTjFxQQn1m7wqwds8GGHGuxsBaa5gzNSeZl4bSIY-WeZRByn_seTyxR91fRNWdRFvdVu958bTKj0pb0xunHboQt72o5wu6sdeYBe_U/s1600/blog_icon.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" class="Fadein" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMi-CdI42pU9E1As14tm5DOpeyUBfzDXLhJQL8RMTjFxQQn1m7wqwds8GGHGuxsBaa5gzNSeZl4bSIY-WeZRByn_seTyxR91fRNWdRFvdVu958bTKj0pb0xunHboQt72o5wu6sdeYBe_U/s320/blog_icon.gif" /></a></div>
Hasilnya:
3 ulasan
smart gak effect gmbo cmnie..
Reply@Anip™ yup,smart ehehe :)
Replyerr..tiap kali letak gambar kena letak kod class="Fadein tu secara manual eh? takde yg otomatik ke?
ReplyNota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.