19 January 2011

Cara membuat animasi Gambar berjalan

Tutorial Cara membuat Gambar berjalan  ini adalah sebagai jawaban atas pertanyaan beberapa sobat yang bertanya lewat komentar pada postingan cara membuat animasi teks berjalan apakah animasi teks  berjalan ini bisa diganti dengan gambar?

Jawabannya adalah bisa, yaitu tinggal mengganti teks dengan URL GAMBAR.
Sebagai contoh animasi teks berjalan bolak-balik ke kiri dan ke kanan,

Kodenya sebagai berikut :
<marquee behavior="alternate" direction="right"
scrollamount="5" scrolldelay="10" >Selamat Datang di Blog Pendidikan</marquee>

Dan hasilnya seperti ini :
Selamat Datang di Blog Pendidikan

Sedangkan untuk mengganti teks dengan gambar, kodenya menjadi :
<marquee behavior="alternate" direction="right" scrollamount="5" scrolldelay="10"><img border="0" height="200" src="http://1.bp.blogspot.com/_ebUnF7PUwY0/TTxBpLLUbeI/AAAAAAAABXo/HzuNWfKLQp8/s200/LOGO_TUTWURI_BW.jpg" width="198" /></marquee>
Dan hasilnya bisa dilihat disini

Silahkan bertanya jika sobat masih mengalami kesulitan dalam membuat animasi gambar berjalan.

13 comments:

  1. animasi kalo pake gambar sendiri gimana..? aqu.a blum ngerti..

    ReplyDelete
  2. @repondpar , kalau pakai gambar sendiri caranya gambar yang mau dijadikan animasi diupload ke hosting gambar dulu semisal di picasa atau tempat penyimpanan gambar yg lainnya, setelah diupload lalu copy linknya.

    ReplyDelete
  3. Maaf..aku mau nanya..kode itu diletakkan dimana ya??
    soalnya aku masih pengguna baru blog..

    ReplyDelete
  4. @Khonsa_K , kodenya bisa diletakkan di widget HTML atau di dalam postingan juga bisa.

    ReplyDelete
  5. cara menambahkan gambar yang bergerak-gerak pada blog itu gmana ?

    ReplyDelete
  6. @dimaz , gambar yang mana mas?

    ReplyDelete
  7. terima kasih mas......artikel ini sangat membantu saya sebagai penguna baru

    ReplyDelete
  8. mas, ko saya gagal ya. kode nya saya taruh di widget HTML. lokasi nya di Design>edit HTML>

    bisa tolong dijelasin detailnya. saya pengguna baru mas hehehe. tengkyu

    ReplyDelete
  9. @Efer Apri , copy saja kodenya, terus tambah gadget (klik pada add a gadget) pilih yang HTML/JavaScript lalu paste, dan simpan / save.

    ReplyDelete
  10. Anonymous17.12.11

    gimana cara nya ga jelas tau??

    ReplyDelete
  11. wah trim bozz...
    mo caba deh.. maksaih infonya

    ReplyDelete

Note: Only a member of this blog may post a comment.