Trik Membuat Teks Berjalan (marquee)

Marquee merupakan kumpulan kode HTML yang jika diterjemahkan dalam bahasa web browser akan membentuk suatu animasi berupa teks atau image yang bergerak atau berjalan. Ketika kamu sedang melakukan silaturahim ke blog lain, tidak jarang kamu akan menemui blog yang menggunakan marquee ini. Tentunya hal tersebut mungkin akan menimbulkan satu pertanyaan tentang "bagaimana cara membuatnya?". Karena pokok bahasannya adalah "marquee", maka kode HTML-nya pun ikut-ikutan marquee, yakni <marquee> ... </marquee>.
Untuk lebih memahami tentang marquee (teks bergerak atau berjalan), mari bersama-sama kita telusuri trik blogger dengan menggunakan kode HTML marquee tersebut.

Berikut beberapa contoh dan manfaat dari kode teks berjalan (marquee) :
<marquee>Teks ini menggunakan marquee default</marquee>
Teks ini menggunakan marquee default
<marquee direction="right">Teks bergerak ke kanan</marquee>

Teks bergerak ke kanan

Catatan : "direction" merupakan kode yang berfungsi untuk menentukan arah gerakan teks atau image. Atributnya adalah left, right, up, dan down.

<marquee direction="up" height="50" width="50%">Teks berjalan ke atas yang dibatasi area tertentu</marquee>

Teks berjalan ke atas & dibatasi area tertentu

Catatan : "height" dan "width" berfungsi untuk menentukan tinggi serta lebar area marquee yang digunakan oleh teks, atributnya berupa nilai angka atau prosen (%).

<marquee bgcolor="#f2f5a9" scrolldelay="2000" direction="down" scrollmount="2" height="50" width="75%">Teks di kiri berjalan ke bawah dgn waktu tunda 2 detik, berkecepatan tertentu yang dibatasi area tertentu pula</marquee>

Teks di kiri berjalan ke bawah dgn waktu tunda 2 detik, berkecepatan tertentu yang dibatasi area tertentu pula

Catatan : "scrolldelay" berfungsi mengatur waktu tunda, atributnya adalah angka per-mili detik. Sedangkan "scrollmount" digunakan untuk mengatur kecepatan gerakan teks, atributnya berupa angka. Semakin besar angka, maka semakin cepat gerakannya.

<marquee bgcolor="#cecef6" scrollmount="2">Teks berkecepatan tertentu dengan menggunakan latar warna biru muda</marquee>

Teks berkecepatan tertentu dengan menggunakan latar warna biru muda

Catatan : "bgcolor" mempunyai fungsi memberikan warna latar teks, atributnya adalah kode warna.

<marquee bgcolor="#f2f5a9" loop="4">Teks 4x berjalan, kemudian hilang</marquee>

Teks 4x berjalan, kemudian hilang
<marquee bgcolor="#cecef6" loop="4" behavior="slide">Teks 4x berjalan, kemudian berhenti</marquee>

Teks 4x berjalan, kemudian berhenti

Catatan : "loop" mempunyai fungsi mengatur jumlah gerakan, atributnya adalah angka. Semakin besar nilainya, maka semakin banyak pula gerakannya. Biasanya kode loop diikuti dengan kode behavior="slide", agar teks tidak hilang.


<marquee hspace="25" width="25%" bgcolor=yellow><p>Teks berjalan</p>dan berjarak horizontal</marquee>

Teks berjalan

dan berjarak horizontal
Marquee!

<marquee vspace="25" width="25%" bgcolor=yellow><p>Teks berjalan</p>dan berjarak vertikal</marquee>

Marquee!

Teks berjalan

dan berjarak vertikal

Marquee!!

Catatan : "hspace" berguna mengatur jarak marquee dengan teks atau tepi elemen secara horizontal, atributnya adalah angka. Sedangkan "vspace" berfungsi untuk mengatur jarak marquee dengan teks atau tepi elemen secara vertikal, atributnya angka juga. Semakin besar nilainya, maka semakin besar jaraknya.


<marquee behavior="alternate">Teks ini akan berjalan bolak-balik</marquee>

Teks ini akan berjalan bolak-balik

Catatan : "behavior" berfungsi untuk mengatur perilaku gerakan teks dgn atribut yang mengikutinya seperti scroll (gerakan default ke kiri), slide (bergerak sekali lalu berhenti), dan alternate (bolak-balik).


Nah, sekarang bagaimana jika kamu ingin memasukkan jenis huruf (font-family) dan warna huruf (color). Kamu tinggal menambahkan kode <span> ... </span> diantara kode marquee, singkat kodenya seperti di bawah ini.
<span style="font-family:arial;color:#0000ff;"><marquee bgcolor="#f2f5a9" direction="down" behavior="alternate" scrollamount="10" height="100" width="50&">Teks arial warna biru</marquee></span>

Teks arial warna biru


Selain itu terdapat variasi lain yang apabila mouse didekatkan, maka teks akan berhenti. Dan akan bergerak kembali ketika mouse dipindahkan ke area lain.
<marquee onmouseover="this.stop()" onmouseout="this.start()" bgcolor="#cecef6" scrollamount="2" direction="up" width="75%" height="100" align="left">
<a href="http://optimasi-blog.blogspot.com/2009/03/seo-optimasi-kualitas-link-dalam-blog.html">Optimasi Kualitas Link dalam Blog</a><br/>
<a href="http://optimasi-blog.blogspot.com/2009/03/gratis-7-seo-tool.html">Gratis 7 SEO Tool</a><br/>
<a href="http://optimasi-blog.blogspot.com/2009/03/seo-optimasi-posting-blog.html">Optimasi Posting Blog</a><br/>
<a href="http://optimasi-blog.blogspot.com/2009/03/seo-optimasi-judul-blog-dalam-title-tag.html">Optimasi Judul Blog dalam Title Tag</a><br/>
<a href="http://optimasi-blog.blogspot.com/2009/03/seo-optimasi-blog.html">Optimasi Blog</a><br/>
<a href="http://optimasi-blog.blogspot.com/2009/03/seo-optimasi-blog-lewat-kata-kunci.html">Optimasi Blog lewat Kata Kunci</a><br/>
<a href="http://optimasi-blog.blogspot.com/2009/03/apa-itu-search-engine-optimization-seo.html">Apa itu SEO?</a><br/>
</marquee>



Optimasi Kualitas Link dalam Blog
Gratis 7 SEO Tool
Optimasi Posting Blog
Optimasi Judul Blog dalam Title Tag
Optimasi Blog
Optimasi Blog lewat Kata Kunci
Apa itu SEO?



Kalau kamu ingin yang berjalan bukan teks, melainkan image maka tinggal mengganti teks yang berwarna merah dengan alamat penyimpanan file gambar kamu.
<marquee><img src="http://i647.photobucket.com/albums/uu191/ariamsi/powered-by.jpg"/></marquee>




Catatan : Kode warna merah merupakan teks yang dimasukkan dalam kode marquee.

Dan masih banyak lagi variasi kode yang dapat kamu optimasi, sehingga sesuai dengan tipe dan karakteristik elemen di blog kamu. Point pentingnya adalah jangan tidak pernah mencoba, karena kamu nanti tidak akan pernah pula tahu arti dan maknanya.


Selamat mencoba marquee menurut versi kamu...

63 komentar untuk “Trik Membuat Teks Berjalan (marquee)”

  1. kuerennn masss!! TOP dech buat OB hehehe~~~ :D

    BalasHapus
  2. yang kaya ginian buat blog jadi lelet apa engga'?

    BalasHapus
  3. bisa buat wp ngga :D

    BalasHapus
  4. to IHSAN: Setahu OB sih ngga, karena peng-kode-annya pakai kode HTML biasa. Lain halnya kalau pakai javascript.

    to van: OB belum tahu tapi dicoba aja dulu, sebab kodenya sederhana saja <marquee> ... </marquee>.

    BalasHapus
  5. terima kasih banyak, aku sudah coba hasilnya waaaauuuuuwwwwww hebat............

    Maklum aku ini pemula.

    Posting dong untuk animasi gambar ............

    BalasHapus
  6. to Blogger Senayan, cari2zq, Arif, Setiawan : thanks, atas komentarnya. Tunggu kunjungan balik OB.:X

    to Rohmatullah Hidayat: tuh sudah ada contohnya untuk image, thanks... ;)

    BalasHapus
  7. tnx ya bwt tipsny,gd lck:)lm kenal bro..

    BalasHapus
  8. to yanuar & ritz: sama-sama, bro dan salam kenal dari OB;)

    BalasHapus
  9. wah nambah lagi pengetahuan ttg html...
    makasih mas OB :)

    BalasHapus
  10. waduh bingung aku,, tapi,Makasih ya mas...

    BalasHapus
  11. menurut gw
    penjelasannya cukup mudah di mengerti
    walau gw baru mo memncoba membuat bolog

    ("tkz mas" atas ilmunya)

    BalasHapus
  12. apa bisa membuat blog jadi berat di load mas?

    BalasHapus
  13. mampir kang
    mampir juga ke saya yah

    BalasHapus
  14. boleh juga tipsnya, tapi tolong kalo bisa ditambah dengan yang berjalan kemudian berhenti sejenak, kemudian berjalan lagi, berhenti lagi secara otomatis. tq semoga sukes

    BalasHapus
  15. BAGUS HASILNYA TIDAK SIA-SIA SAYA BUKA BLOD ANDA DARI DENPASAR-BALI.

    BalasHapus
  16. Boleh di coba nih.. langsung praktek ah..

    BalasHapus
  17. OOo..ternyata gitu toh caranya..makasih mas triknya..:)

    BalasHapus
  18. hwahha*
    doakan smuga bisa yoaa.
    okok.??

    BalasHapus
  19. Hallo sahabat indonesia
    ikutan program tabungan masa depan yook...
    dengan medianya blog loh
    kali bisa merubah nasih sahabat disini..

    salam blogger
    http://tabungan-pensiun.blogspot.com

    wasalam

    BalasHapus
  20. Arigatou gozaimasu atas Informasinya..
    :)

    BalasHapus
  21. Kereeeeeeeeeeeeeeeeeeeeennnnnnnnnnnnnn

    BalasHapus
  22. Mantabb,..thxs Langsung ke TeKaPe,..

    BalasHapus
  23. Keren Ptunjuknya Om,.,.,. ;;)

    BalasHapus
  24. bagus....keren.....good.... top lah

    BalasHapus
  25. makasih banget infonya sangat bermanfaat :)

    BalasHapus
  26. kang?OB....kuk aq gk bs ....?carax masukan kodex gimana thu......bls GPL;));));));));))

    BalasHapus
  27. @GENERASI MUDA Kodenya yang ada dalam area background abu-abu, tinggal penempatannya saja lagi "mau diletakkan dimana?", mas

    BalasHapus
  28. makasih maz tutorialnya........hehehehehe

    BalasHapus
  29. Buat saya sebagai newbie blog anda banyak membantu .. Terima kasih, salam kenal dan sukses selalu dan tentunya semoga mengharukan ....

    BalasHapus
  30. baguss banget deh ^^

    tnx you brother

    BalasHapus
  31. mksih buanyak mas..............................

    BalasHapus
  32. mkasih banyak mas.,,

    BalasHapus
  33. tx broooo...it's simple and great...posting type yang lain ya...hik2 sip deh

    BalasHapus
  34. Mantap abiiiissss....ini dia yg owe cari..

    BalasHapus
  35. Selamat malam hanya jalan-jalan bang

    BalasHapus
  36. makasih ...........................

    BalasHapus
  37. ni cara masang nya di mana ? di HTML atau di mana ?

    BalasHapus
  38. @Ma'ruf Khudori Blog : Untuk pemasangan sederhana, bisa dilakukan pada penambahan widget ("add gadget"), kk.

    BalasHapus
  39. PAGE RANK kami di atas 26,447,446
    silahkan yang ingin menaikan PR blog mampir ke sini http://molendotcom.blogspot.com/p/tukar-link.html

    BalasHapus
  40. waw....bagi-bagi link..buruan ke sini!

    BalasHapus
  41. salam kenal kang

    tirms atas infonya

    BalasHapus
  42. Blog yang sederhana tapi kaya isi, makasih mas informasinya. Sudah aku bookmark halaman ini suatu saat aku pasti berkunjung lagi.

    BalasHapus
  43. krennn.... mas... makasih ya???

    BalasHapus
  44. Tanks...infonya,sangat bermanfaat...
    jika sempat berkunjung ke blogku ya..http://wisata-lombok.blogspot.com mohon saran dan kritikannya...

    BalasHapus