Membuat Teks Berjalan (Marquee)
Sebelumnya nggak pernah kepikiran untuk bikin tips seperti ini kalo saja Iman my little brother nggak minta bikinin tutorial marque. Sebenarnya saya ragu, bener nggak seorang yang pinter blog seperti Iman yang mempunyai template bagus minta saya bikinin tutorial marquee? Lagian bahasa html memang paling rawan untuk orang seusia saya, masih hijau lumut 
Tapi ya apa salahnya sih sekedar berbagi, yang jelas ini bukan tutorial lho, hanya sekedar tips memaksimalkan kemampuan, keindahan serta teks pada postingan atau pun sidebar blog Anda.
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
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
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
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
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
Marque 2.0.1 Pengembangan dari marquee sebelumnya, dengan pancingan scrollamount dia menjadi sangat agresif
Tag Html
<marquee behavior="alternate" scrollamount="18">Teks Anda</marquee>
Marquee 2.0.2
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 #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 #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 #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 #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 ^_^
_____________________
Gambar tuh lupa semalem ngambil darimana karena sempet error
Klik dan kirim ke:
Jika artikel ini bermanfaat.
Popularity: 7% [?]
Catatan:
- Jika Artikel di atas bermanfaat dan membantu, terimakasih untuk menyimpan link hakimtea.com pada blog, forum atau situs Anda.
- Silahkan mengcopy-paste artikel di atas untuk dipublikasikan ulang pada blog Anda, forum, situs atau media lainnya, dengan catatan menyebutkan blog ini sebagai sumber rujukan, dengan teks: Hakimtea.com dan link: http://hakimtea.com atau permalink artikel bersangkutan.
- Jika ada hak cipta yang terlanggar karena kelalaian saya pribadi semoga Anda berkenan menegur saya langsung.
Artikel yang berhubungan:
- Coret Tulisan, Tulisan Akronim, Dll Bagi pengguna wordpress untuk efek tulisan dicoret seperti ini tulisan dicoret atau bikin akronim (tulisan penjelasan dalam singkatan) seperti SD,
- Membuat Banner Blog Postingan ini atas permintaan Teuku Zulfikar Amin yang ingin membuat banner blognya. Karena saya tahu sedikit tentang pembuatan banner blog
- Membuat & Menyisipkan Tabel HTML di Postingan Blogger Bagi Anda pengguna Ms Office; baik itu excel ataupun MS Word maka untuk membuat table sudah sangat dimudahkan *anak kecil
- [Surat Pertama] Tawaran Workshop Ngeblog Hari Ahad kemarin datang sepucuk surat cinta kerjasama dari sebuah instansi swasta yang tergerak di bidang pendidikan, agama dan sosial
- Membuat Banner dan Logo Blog Tanpa Menguasai Photoshop Kalau tips terdahulu tentang membuat banner blog menggunakan program Adobe Photoshop CS dan Image Ready yang cukup jelimet jika memang
Hai, saya Hakimtea, bermimpi menjadi seorang full time blogger, berkhayal menjadi master blogger... saat terbangun semua masih tetap sama, hanya seorang hakimtea biasa, seorang blogger newbi yang mencoba menulis dan berbagi informasi seputar budaya ngeblog. 
March 9th, 2008 at 3:02 am
Makasih ya tips/tutorialnya…..
btw yg tulisan arabicnya artinya apaan?? yg kubaca مرقو ادلح تيكس برجالان “marquee adalah ….. berjalan” ga ngerti yg tengahnya…
sekali lg thank you mas tipsnya…..
sudah kucoba berhasil…
Wassalam,
March 9th, 2008 at 4:55 am
yang tengah itu artinya, تيكس : Teks… emang asal nulis, cari yg mirip2… ^_^
sama2 wa
March 9th, 2008 at 9:25 am
Istilah artikelnya unik>>>>”Tenda Besar,” atau “tempat berteduh seperti atap dimuka pintu masuk sebuah gedung.he..he..
btw tips yang penting buat rekan2 yg lom faham.
March 9th, 2008 at 9:58 am
Makasih mba KD
nemu artinya emang seperti itu dari linguist 
Saya cantumkan karena seperti Anda bilang, saya pun merasa unik 
March 10th, 2008 at 1:38 pm
saya kaget loh…kok ada artikel tutorial marque tapi it’s worth lho…. pasti beguna,buktnya yg posting pun banyak
jadi kepikran maw edit CA_line nya mas cosa pake marque…
March 10th, 2008 at 2:20 pm
Wah mas arham ternyata, jadi malu saya…
ya kemaren waktu posting ini, sengaja ga mau nyapa dulu neng google… biar pure! krn saya yakin yg bikin posting ini pasti udah banyak. Trnyata stlh publish waktu nanya si neng… bener ajah 
lumayan urutan 6-8 dari 60-720 hasil pencarian dgn keyword “membuat teks berjalan”
March 15th, 2008 at 10:53 pm
artikel yang bermanfaat. thanks dah mau nulis soal marquee. Kalau isinya banner bisa nggak ya?
March 16th, 2008 at 8:27 am
Isi banner bisa saja mas Bizon, namun lebih baik ukuran bannernya yg agak lebar (min 468 width, kurang dikit gpp, bungkus). Dari tulisan saya ttg Membuat Banner Blog trus dari photoshop edit di ImageReady dgn sentuhan akhir Tween disebelah tombol Duplicates frame layer pada jendela animation, setting saja frames to addnya. Met mencoba mas Bizon!
Sukses dgn adsense, SEO dan MMOnya…
jgn lupa bagi2 ilmunya ^_^
April 23rd, 2008 at 2:45 pm
Mas bagaimana jika ditaruh di blogku (samping kanan) sebagai link blog kawanku yang berjalan ke atas . thank you makasih ya tak tunggu loh
April 23rd, 2008 at 11:22 pm
Dede: pake aja Marquee 3.0.1 tinggal diganti teksnya dengan link yang ada, contoh:
<marquee direction="up" onmouseover="this.stop()" width="100%" scrollamount="2" onmouseout="this.start()" height="100">Teks Anda</marquee>ganti seperti ini,
<marquee direction="up" onmouseover="this.stop()" width="100%" scrollamount="2" onmouseout="this.start()" height="100"><a href="http://hakimtea.com">Hakimtea</a>
<a href="http://">link 1</a>
<a href="http://">link 2</a>
<a href="http://">link 3</a>
<a href="http://">link seterusnya</a>
</marquee>selamat mencoba
May 22nd, 2008 at 11:50 am
kim….blog ente mantap bener dech…
gua blajar banyak nich …maklum baru kenal blog…
tengkiu ya……salam kenal…
July 8th, 2008 at 3:02 am
ha ha marquee … salah satu fitur favorit saya
July 15th, 2008 at 7:03 am
weh, apik tnan mas. aku dah tak coba di blog Capoeira Solo. cman kalo mau modif font sama warnanya gimana ? thanks ya
July 23rd, 2008 at 11:02 am
makasih infonya mas
August 8th, 2008 at 11:01 pm
thanks tutorialnya mas..dah tak coba diblogku, tapi harus manual ya…soalnya kan di blogspot itu ada configure link, itu ga bis tuh dimasukin marquee, jadi aku bikin pake html aja, trus copy paste link blog nya manually, ribet siy, tp hasilnya cukup memuaskan.tenkyu mas hakim..sering2 bagi tips nya yaa…
August 9th, 2008 at 4:11 am
August 13th, 2008 at 2:50 pm
mas kalo aku mo bikin marquee gimana ya caranya….coz blm mudeng ni masuk kemana dulu. thx
August 13th, 2008 at 5:47 pm
Met mencoba ya…