masrifqi blog’s

Just another WordPress.com weblog

Membuat Teks Berjalan (Marquee)

Sebelumnya nggak pernah kepikiran untuk bikin tips seperti ini. Sebenarnya saya ragu, bener nggak seorang yang pinter blog  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 adalah teks berjalan lho
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 adalah teks berjalan lho
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 adalah teks berjalan lho
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 adalah teks berjalan lho
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
Marquee adalah teks berjalan lho
Marque 2.0.1 Pengembangan dari marquee sebelumnya, dengan pancingan scrollamount dia menjadi sangat agresif
Marquee adalah teks berjalan lho

Tag Html
<marquee behavior="alternate" scrollamount="18">Teks Anda</marquee>

Marquee 2.0.2
Marquee adalah teks berjalan lho
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 ^_^

Klik dan kirim ke:Lintas Berita
Jika artikel ini bermanfaat.

9 September 2008 - Posted by | Blogger Themes, Blogging, Tip Trik, tips, Tips & Trik, Tips&Trik

15 Komentar »

  1. terima kasih

    Komentar oleh ary | 7 Oktober 2008 | Balas

  2. terima kasih

    Komentar oleh ary | 7 Oktober 2008 | Balas

  3. terima kasih

    Komentar oleh ary | 7 Oktober 2008 | Balas

  4. tengsss bangedd cc..
    hhohh..
    cinta dee..
    xixixi😄

    Komentar oleh nesa | 30 Oktober 2008 | Balas

  5. tengsss bangedd cc..
    hhohh..
    cinta dee..
    xixixi😄

    Komentar oleh nesa | 30 Oktober 2008 | Balas

  6. Teks Anda

    Komentar oleh bakotogel | 3 November 2008 | Balas

  7. Teks Anda

    Komentar oleh bakotogel | 3 November 2008 | Balas

  8. thank u…may god bless u

    Komentar oleh ridho | 31 Desember 2008 | Balas

  9. thank u…may god bless u

    Komentar oleh ridho | 31 Desember 2008 | Balas

  10. Sedang tak coba , kabarnya nanti

    Komentar oleh lain2009 | 13 Februari 2009 | Balas

  11. Sedang tak coba , kabarnya nanti

    Komentar oleh lain2009 | 13 Februari 2009 | Balas

  12. thank’s ya tas tutorial nya……

    Komentar oleh okevie | 27 Maret 2009 | Balas

  13. thank’s ya tas tutorial nya……

    Komentar oleh okevie | 27 Maret 2009 | Balas

  14. Thank’s smua commentsnya

    Komentar oleh ree"f'-'Q"ue | 27 Maret 2009 | Balas

  15. Thank’s smua commentsnya

    Komentar oleh ree"f'-'Q"ue | 27 Maret 2009 | Balas


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: