.

Membuat Teks Berjalan (Marquee)

Apa itu Marquee?
Marquee adalah teks berjalan dalam bahasa html. Kalo kita lihat marquee menurut semantik sepertinya ga ada hubungan dengan teks berjalan, tapi kalo diperhatikan lagi… mmmmh memang ga ada hubungannya ^_^ (sepertinya). Tapi kalo kita mau perhatikan lebih dalem, Marquee mempunyai arti “Tenda Besar,” atau “tempat berteduh seperti atap dimuka pintu masuk sebuah gedung” Mmmmh… apa hubungannya dengan marquee sebagai teks berjalan…? Setidaknya menurut saya memang ada, melalui “tenda” tersebut orang lalu lalang berjalan. :)
Berikut ini contoh-contoh sebagian kecil penggunaan marquee pada teks. Sengaja marquee-marquee di bawah ini saya beri title mulai marquee 1.0 sampai 3.0.3, tidak ada keistimewaan dari penamaan tersebut, hanya untuk memudahkan saya dalam memberi penjelasan. Plus tambahan saya sertakan kode html yang diperlukan, Anda tinggal mengganti teks yang ada dalam kode tersebut “Teks Anda”.
Marquee 1.0
Teks Anda
Marquee 1.0 ini merupakan marquee standar agar teks Anda bisa berjalan secara default (dari kanan ke kiri).
Tag Html
<marquee>Teks Anda</marquee>
Marquee 1.0.1
Teks Anda
Marquee 1.0.1 adalah pengembangan dari 1.0, keistimewaannya jika Anda arahkan mouse pada teks tersebut maka dia akan istirahat dan berhenti dari perjalanannya yang panjang.
Tag Html
<marquee onmouseover="this.stop()" onmouseout="this.start()">Teks Anda</marquee>
Marquee 1.0.2
Teks Anda
Marquee 1.0.2 jika Anda menggunakan teks Arabic yang dimulai dari kanan ke kiri, maka Anda membutuhkan Marque ini yang berjalan sebaliknya; dari kiri ke kanan, contoh dengan teks arabic:
مرقو ادلح تيكس برجالان
Tag Html
<marquee direction="right">Teks Anda</marquee>
Marquee 2.0
Teks Anda
Marquee 2.0 Marquee ini tidak memiliki kemampuan magic seperti David Coperfield marquee sebelumnya yang bisa menembus ruang, Marquee 2.0 ini kerjaannya bolak-balik dari ruang kotak yang kasat mata. :)
Tag Html
<marquee behavior="alternate">Teks Anda</marquee>
Marquee 2.0.1
Teks Anda
Marque 2.0.1 Pengembangan dari marquee sebelumnya, dengan pancingan scrollamount dia menjadi sangat agresif :)
Teks Anda
Tag Html
<marquee behavior="alternate" scrollamount="18">Teks Anda</marquee>
Marquee 2.0.2
Teks Anda
Marquee 2.0.2 Masih pengembangan dari Marquee 2.0 dengan sentuhan on-mouse-over stop dan on-mouse-out start, seperti marquee 1.0.1 jika Anda arahkan mouse pada teks maka dia akan berhenti.
Tag Html
<marquee behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()">Teks Anda</marquee>
Marquee 3.0

Marquee adalah teks berjalan lho #1
Marquee adalah teks berjalan lho #2
Marquee adalah teks berjalan lho #3
Marquee adalah teks berjalan lho #4
Marquee adalah teks berjalan lho #5
Marquee adalah teks berjalan lho #6
Marquee adalah teks berjalan lho #7

Marquee 3.0 Dia adalah marquee climbing, marquee pendaki ini suka sekali ketinggian, sehingga kita lihat arah teksnya pun ke atas (up) :) . Jika Anda memiliki teks yang banyak, maka marquee ini merupakan pilihan yg tepat dan sangat cocok sebagai teman pendamping hidup Anda.
Tag Html
<marquee direction="up">Teks Anda</marquee>
Marquee 3.0.1

Marquee adalah teks berjalan lho #1
Marquee adalah teks berjalan lho #2
Marquee adalah teks berjalan lho #3
Marquee adalah teks berjalan lho #4
Marquee adalah teks berjalan lho #5
Marquee adalah teks berjalan lho #6
Marquee adalah teks berjalan lho #7

Marquee 3.0.1 Pengembangan dari marquee sebelumnya yang tidak mempunyai batas ruang, marquee ini kita batasi ruang kasatnya sehingga memliki height 100 saja. Demikian dengan kemampuan scrollamountnya kita perlambat. Dan kita kasih on mouse stop/start juga.
Tag Html
<marquee direction="up" onmouseover="this.stop()" width="100%" scrollamount="2" onmouseout="this.start()" height="100">Teks Anda</marquee>
Marquee 3.0.2

Marquee adalah teks berjalan lho #1
Marquee adalah teks berjalan lho #2
Marquee adalah teks berjalan lho #3
Marquee adalah teks berjalan lho #4
Marquee adalah teks berjalan lho #5
Marquee adalah teks berjalan lho #6
Marquee adalah teks berjalan lho #7

Marquee 3.0.2 Masih pengembangan dari marquee sebelumnya, hanya saja teks berada di tengah ruang kasat.
Tag Html
    <marquee direction="up" width="100%" scrollamount="2" height="100" align="center">Teks Anda</marquee>
Marquee 3.0.3

Marquee adalah teks berjalan lho #7
Marquee adalah teks berjalan lho #6
Marquee adalah teks berjalan lho #5
Marquee adalah teks berjalan lho #4
Marquee adalah teks berjalan lho #3
Marquee adalah teks berjalan lho #2
Marquee adalah teks berjalan lho #1

Marquee 3.0.3 Pengembangan juga dengan arah berlawanan dari marquee sebelumnya, marquee ini senang sekali berjalan menurun. Sehinggan teks yang kita lihat berjalan dari atas ke bawah. Kemampuan scrollamountnya tidak kita batasi sehingga terlihat agresif dengan ruang kasat yang kecil. Silahkan Anda perlambat sendiri.
Tag Html
<marquee direction="down" width="100%" height="100">Teks Anda</marquee>
Demikian tips sederhana ini, silahkan Anda coba….! Jika ingin manambahkan marquee yang lain silahkan tulis komentar. :)
Keep Blogging ^_^
thumbnail
Judul: Membuat Teks Berjalan (Marquee)
Rating: 100% based on 99998 ratings. 5 user reviews.
Ditulis Oleh

Artikel Terkait tutorial :

95 komentar:

  1. akhirnya nemu juga nih artikel., hehehe

    BalasHapus
  2. haha., untuk teks nya gak jalan-jalan....

    BalasHapus
  3. makasi banget bantuannya, bisa di coba ini

    BalasHapus
  4. Amazing artikel…. Semoga saya bisa praktekan tipsnya dan berhasil

    BalasHapus
  5. Terima Kasih, Tulisan yang sangat membantu. Salam Sukses!

    BalasHapus
  6. Terima kasih atas pencerahannya, tulisannya menarik juga. Saya akan coba

    BalasHapus
  7. aku paling senang dengan semua pengetahuan ini, terima kasih sudah berbagi ilmu

    BalasHapus
  8. Setelah membaca Info dan Artikel, saya jadi ingin mencoba. Salam Sukses

    BalasHapus
  9. Terima kasih atas Artikel dan Info yang selalu menambah wawasan.semoga sukses

    BalasHapus
  10. Menarik, sangat Menarik Artikel dan Tipsnya. boleh dicoba. salam sukses

    BalasHapus
  11. saya akan mencoba tipsnya yang sangat bermanfaat sekali

    BalasHapus
  12. Tulisan dan Tipsnya sangat bermanfaat dan Infomatif. wajib dicoba. sukses selalu.

    BalasHapus
  13. Tips yang cerdas cuma di Wibesite ini banyak kumpulan Artikel bagus. harus dicoba. salam sukses

    BalasHapus
  14. Amazing artikel, Infonya bagus banyak mengandung Tips dan Pesan yang bermutu. salam sukses

    BalasHapus
  15. Cemerlang Postingan dan Infonya.boleh dicoba. ditunggu info berikutnya. Terimaksih

    BalasHapus
  16. Saya menemukan Artikel hebat di wibesite ini jadi ingin coba Tipsnya. Semoga berhasil

    BalasHapus
  17. Artikel Menarik terutama Infonya, boleh dicoba. Salam sukses

    BalasHapus
  18. Saya senang setelah membaca Tips dan Artikelnya, harus dicoba.Semoga berhasil

    BalasHapus
  19. Info dan Tulisannya Amazing, boeh dicoba. Sukses selalu

    BalasHapus
  20. Tipsnya sangat Infomatif, wajib dicoba salam sukses

    BalasHapus
  21. Terimakasih Banyak Tips dan Artikelnya, boleh dicoba. Salam sukses

    BalasHapus
  22. Terimakasih Artikelnya bermanfaat dan Infonya menambah Ilmu pengetahuan. Harus dicoba. Semoga berh

    BalasHapus
  23. setelah saya mencari cari di beberapa Wibesite , saya menemukan Artikel yang Bagus dan bermanfaat. Patut di coba, sukses selalu

    BalasHapus
  24. Saat membaca Artikel dan Tipsnya yang benar benar menarik. Jadi ingin mencoba. Salam sukses selalu

    BalasHapus
  25. cemerlang Postingan dan Infonya.boleh dicoba. ditunggu info berikutnya. Terimaksih

    BalasHapus
  26. Wibesite yang menarik di dalamnya banyak Artikel dan Tips yang mengandung Ilmu Pengetahuan, Harus dicoba.Ter

    BalasHapus
  27. Saya senang membaca Info dan Artikel yang di buat di Wibesite ini. Patut dicoba. Salam Sukses selalu.

    BalasHapus
  28. saya senang setelah membaca tipsnya,pasti saya akan di coba..

    BalasHapus
  29. terimakasih tips yang sangat amazingnya, pasti saya akan coba tipsnya

    BalasHapus
  30. Cemerlang Postingan dan Infonya.boleh dicoba. ditunggu info berikutnya. Terimaksih

    BalasHapus
  31. Postingan yang sangat Hebat, Tips boleh dicoba.salam sukses

    BalasHapus
  32. Artikel yang bermanfaat dan berguna, wajib di coba. sukses selalu

    BalasHapus
  33. Ilmu yang sangat Hebat, boleh dicoba Artikel dan Tipsnya. Semoga berhasil

    BalasHapus
  34. Artikel yang benar benar sangat infomantif dan Kreatif. boleh dicoba, sukses selalu

    BalasHapus
  35. setelah saya mencari cari di beberapa Wibesite , saya menemukan Artikel yang Bagus dan bermanfaat. Patut di coba, sukses selalu

    BalasHapus
  36. Baru kali ini saya membaca Artikel yang sangat membangun. Boleh dicoba

    BalasHapus
  37. wah bagus sekali infonya pasti say akan coba sekarang juga, sukses yah

    BalasHapus
  38. Tipsnya boleh dicoba, Artikelnya sangat bermanfaat.

    BalasHapus
  39. Terimaksih untuk info yang sangat efektif, boleh dicoba.

    BalasHapus
  40. Saved as a favorite, I like your site!

    My page; click here

    BalasHapus
  41. Its like you read my mind! You appear to know so much about this,
    like you wrote the book in it or something. I
    think that you could do with some pics to drive the message
    home a bit, but other than that, this is excellent blog.
    A great read. I'll definitely be back.

    Feel free to surf to my page Visit Link

    BalasHapus
  42. Hello! I just want to give you a huge thumbs up for the great info you have got right here on this post.
    I'll be returning to your website for more soon.

    Review my webpage ... More information

    BalasHapus
  43. You're so awesome! I don't suppose I've read through anything like that before. So wonderful to find someone with some genuine thoughts on this topic. Seriously.. many thanks for starting this up. This site is something that is needed on the web, someone with some originality!

    Also visit my web site: visit link

    BalasHapus
  44. What a material of un-ambiguity and preserveness of valuable knowledge about
    unpredicted emotions.

    Feel free to visit my homepage :: click here

    BalasHapus
  45. I know this site provides quality dependent articles and other data, is there any other web page which offers these stuff in quality?


    my homepage ... interior designers Gauteng

    BalasHapus
  46. Article writing is also a excitement, if you be acquainted
    with afterward you can write if not it is difficult to write.


    My website: Accomodation Marrakech B&B in Marrakech

    BalasHapus
  47. It's amazing for me to have a site, which is helpful for my knowledge. thanks admin

    Look at my page - recruitment

    BalasHapus
  48. Short winter sun breaks in paphos car hire will still loom:
    the question of why Motorola opted for the older,
    slower Firefox. Thrifty Paphos Car Hire does provide a rewards program.
    The city of one of my old favorite movies, I roll my eyes.


    my web page; http://rattanabb.com/modules.php?name=Your_Account&op=userinfo&username=MahaliaDu

    BalasHapus
  49. The choice is a wide though mostly flush affair, with minimal
    amount of spacing between the keys. An accident has to be
    it. Meanwhile, Ankara triggered by the discovery of the paphos car
    hire conflict. Alamo, Budget Paphos Car Hire,
    one of the highlights of any trip to Paphos Car Hire, look for drop-off places where the fee is little.


    My page ... Sugarforum.jp

    BalasHapus
  50. There's certainly a great deal to know about this subject. I like all the points you have made.

    my site; el cigaret

    BalasHapus
  51. Hey! Would you mind if I share your blog with my myspace group?
    There's a lot of folks that I think would really appreciate your content. Please let me know. Thanks

    My web-site; need money today for bills

    BalasHapus
  52. Today, I went to the beach with my kids. I found a sea shell and
    gave it to my 4 year old daughter and said "You can hear the ocean if you put this to your ear." She put the shell to her ear and screamed.
    There was a hermit crab inside and it pinched her ear. She never wants to go back!
    LoL I know this is totally off topic but I had to tell someone!



    Also visit my site :: sian

    BalasHapus
  53. This is really fascinating, You are an excessively skilled blogger.
    I've joined your rss feed and stay up for looking for extra of your magnificent post. Also, I've shared
    your web site in my social networks

    My web site - vaping ecigs

    BalasHapus
  54. Pretty! This was an extremely wonderful post. Thank you for
    providing this information.

    Also visit my webpage: http://www.youtube.com/watch?v=fCkK9-pzu_o

    BalasHapus
  55. Having read this I believed it was really enlightening.
    I appreciate you finding the time and effort to put this article together.
    I once again find myself personally spending a lot of time both reading and commenting.
    But so what, it was still worthwhile!

    Also visit my page - trade binary options

    BalasHapus
  56. What a mаterial of un-ambiguity and pгesеrveness οf pгeciouѕ
    familiагity conсerning unpгedicted feelіngs.


    Ηere іѕ my web sіte :: omega fish oil

    BalasHapus
  57. I just joined an interracial dating site which i thought was only for white ladies and black guys
    but all I at any time see are white guys seeking black females and
    vice versa.

    my page: marcus london

    BalasHapus
  58. Thats an exciting observation about folks not
    often wanting their Facebook friends to view
    that they are courting online but I am wondering if some privacy controls might be built into
    the dating app to limit or block other Facebook buddies from seeing that someone is making use of the dating app?


    My website: facebook statuses that will attract women

    BalasHapus
  59. We permit all feedback constructive and adverse. We usually do not
    delete comments which are meant to help audience.
    Nonetheless, proper off the bat, I'm able to inform you that we've no affiliation to any company and
    do not promote their products within our content material.


    my weblog gain muscle mass and lose fat diet

    BalasHapus
  60. Amazing! This sheds looks so elegant !

    my web blog Cheap arrow sheds

    BalasHapus
  61. terimaksih banyak ya atas infonya sangat bermanfaat untuk saya.....@

    BalasHapus
  62. makasih gan boleh di coba tuh .

    BalasHapus
  63. semoga info selanjutnya lebih menarik lagi...!!!

    BalasHapus
  64. informasinya menarik untk di baca, terimakasih Gan....

    BalasHapus
  65. ikut nyimak info yang ini gan, informasi yang tersaji sangat baik dan dapat menambah wawasan bagi saya sebagi pembaca. Saya tunggu Infomasi terbarunya gan..

    BalasHapus
  66. Makansih buat infomasinya, sangat bagus dan bermanfaat....

    BalasHapus
  67. Enak sekali pagi hari baca artikel Anda, karena infonya sesuai dengan yang saya cari, makasih buat infonya....

    BalasHapus
  68. Terimakasih atas informasinya. Ditunggu terus informasi selanjutnya. :) Salam semangat dari yang tersemangat !!

    BalasHapus
  69. Blognya bagus, artikelnya juga sangat menarik. Top!

    BalasHapus
  70. Terimakasih atas informasinya, artikel ini memberikan saya ilmu pengetahuan dan membimbing saya untuk langsung mempraktknnya dan sesuai dengan apa yang sedang cari .

    BalasHapus
  71. Sudah sore,,,, tetap harus Semangaaaaaaaaat........ !! :D

    BalasHapus
  72. Terimakasih atas infonya .. semoga bermanfaat bagi orang banyak :) amin

    BalasHapus
  73. sipp,,,tugas HTMl jadi beres karena da info ini,,tks

    BalasHapus
  74. Ijin menyimak dan belajar terimakasih semoga kita selalu dalam kelancaran,thank admin

    BalasHapus
  75. teks yang berjalan bikin menarik pengunjung

    BalasHapus
  76. Hello, Ada 3 Resep Menarik. Kamu Bisa Langsung Klik Di Tautan Berikut Untuk Melihatnya, Yang Pertama Resep Rendang Jengkol, Terus Ada Resep Rendang Ayam, dan Resep Rendang Sapi, Selamat Mencoba.

    BalasHapus
  77. Berbagai Macam Tutorial, Tips, Trick Seputar Blogger dan Teknologi, Serta Infromasi Yang Menarik
    https://roliyantips.blogspot.com/

    BalasHapus
  78. Mntep infonya mampir dong ke http://drakoreindo.jw.l download dan nonton drama dn movie

    BalasHapus
  79. Lama mencari, baru kali ini ketemu tutorial yang lengkap..! tapi belum update yang terbaru mas?...

    BalasHapus

 
Copyright © 2013. About - Sitemap - Contact - Privacy
Template Seo Elite oleh Bamz