Membuat gambar animasi

Berbagi ilmu kepada orang lain menurut saya tidak akan mengurangi ilmu kita akan tetapi malah menambah ilmu kita. Jadi setiap ada ilmu kita yang bermanfaat seharusnya kita share kepada orang lain biar ilmu yang orang yang diperoleh tersebut dapat disampaikan kepada orang lain dan begitu juga seterusnya, karena lebih baik berbagi ilmu dari pada dinar atapun dirham.

gambar-kedip---kedip-dengan-jquery

Pada kesempatan kali ini saya akan berbagi lagi kepada sobat blogger tentang tips dan trik baru lagi nih, yaitu bagaimana cara membuat gambar animasi dengan JQuery. Giamana berminat untuk mempelajarinya gan? Kalo sobat berminat ikuti langkah di bawah ini.

1. Login ke bloggger atau klik disini.
2. Pilih template >> Edit Html >> Lanjutkan.
3. Jangan lupa centang Expand widget template.
4. Cari code di bawah ini.

</head>

5. Setelah code </head> ketemu copy paste code JQuery di bawah ini dan letakkan di atas code tersebut.

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

6. Simpan template.
7. Kemudian sobat kembali lagi dashboard dan pilih tata letak >> Tambah gadget >> Html/JavaScript.
8. Copy paste code di bawah ini.

<img class='animasiGambar' src='Url gambar anda'/>​

Catatan:

  • Tulisan yang berwarna biru silahkan sobat ganti dengan Url gambar yangsobat inginkan.

9. Dan yang terakhir simpan.

Selamat mencoba, Happy blogging :)

Tidak ada komentar:

Catatan:
Untuk menyisipkan video, gunakan tag <i rel="youtube">URL YOUTUBE ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Untuk menyisipkan kode panjang, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!"

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah ini.

Konversi Kode di Sini!OOT

 
Design by Juned al~Bughisy Copyright © 2012 ~ 2013 Powered by Blogger
Back to Top