Abis jalan - jalan dari w3schools dari sana dapet training tentang animasi dengan jquery (.animate) dengan secuil pengetahuan tentang jquery. aku beneran baru banget kenal jquery tapi alhamdulilah biar cuman secuil yang penting tau, soalnya aku pengen banget bisa bermain kode tapi sampai sekarang aku masih sedikit mengenal kode tapi namanya juga proses kalau pengen pinter selalu berusaha dan jangan lupa berdo'a. Sebelumnya kan aku pernah ngepost tentang Cara membuat gambar animasi kedap - kedip sekarang saya akan posting lagi tentang gambar kedap kedip intinya sama gambar nya kedip - kedip cuman yang versi || ini kodenya lebih sedikit dan simple nih screenshotnya ada di bawah ini.
Pada penasaran gak nih . . . .?? oh iya Gambar animasi dengan jquery yang versi || ini juga menurut saya lebih ringan dan lembut, langsung saja deh lihat demonya ya, biar gak penasaran.
DEMO
Nah kalau pengen buat gambar di blog anda menjadi animasi seperti itu silahkan ikuti langkah langkahnya.
1. Pastikan anda sudah di dasbor blogger
2. Klik Rancangan / Template
3. Klik Edit HTML
4. Klik Lanjutkan / Proceed ( jika di editor baru blogger )
5. Cari kode
</head>6. Jika sudah ketemu silahkan simpan kode jquery di bawah ini di atas kode
</head><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function(){
function SystemOfBlog_Animasi(){
$("img.animasiGambar").animate({opacity:'0'},1000);
$("img.animasiGambar").animate({opacity:'1'},1000,SystemOfBlog_Animasi);
}
SystemOfBlog_Animasi();
});
</script>7. Setelah itu klik SIMPAN TEMPLATE.
8. Kemudian klik lagi Rancangan / Tata Letak
9. Pilih HTML / Javascript
10. Masukan kode HTML gambar di bawah ini di kolom bagian bawah HTML / Javascript
<img class='animasiGambar' src='Url gambar anda'/>11. Ganti kode berwarna biru dengan URL gambar anda dan silahkan lihat gambar anda.
