NahlCode

Learn, Start and Grow

Membuat teks berjalan pada web dan blog

by · April 27, 2011

Assalamu’alaikum

Teks berjalan dan berkedip pada bahasa html disebut dengan marquee behavior. Kalau kita mencari arti kata marquee  di kamus, maka artinya akan lain yaitu “tenda besar”. Pastinya tidak nyambung kan., hehe,,, menurut pengertian yang saya dapat bahwa marquee adalah tag html yang memberikan efek gerak pada teks ataupun gambar, gerak disini dimaksudkan untuk mempercantik halaman web maupun blog, agar membawa daya tarik bagi pengunjung web maupun blog. itu saja sedikit pengertian dari marquee, karena disini saya tidak membahas secara detail pengertian marquee itu sendiri.

Baiklah, berikut tutorial cara membuat teks berjalan dan berkedip pada web dan blog:
1. Marquee 1.0.0
Membuat text berjalan pada web dan blog
Marquee 1.0.0 ini merupakan marquee behavior standar agar teks anda bisa berjalan secara default (dari kanan ke kiri).

<marquee>Teks</marquee>


2. Marquee 1.0.1
Membuat text berjalan pada web dan blog
Marquee 1.0.1 adalah pengembangan dari marquee 1.0.0, Marquee ini mempunyai kelebihan jika anda arahkan mouse pada teks tersebut maka dia akan istirahat atau berhenti.

<marquee onmouseover=”this.stop()” onmouseout=”this.start()”>Teks</marquee>

3. Marquee 1.0.2
Membuat text berjalan pada web dan blog
Teks dengan marquee 1.0.2 ini maka akan berjalan sebaliknya yaitu dari kiri ke kanan.

<marquee direction=”right”>Teks</marquee>

4. Marquee 2.0.0
Membuat text berjalan pada web dan blog
Marquee 2.0.0 ini mempunyai kelebihan bolak-balik dari ruang kotak yang tidak terlihat oleh mata.

<marquee behavior=”alternate”>Teks</marquee>

5. Marquee 2.0.1
Membuat text berjalan pada web dan blog

Marquee 2.0.1 adalah pengembangan dari marquee 2.0.0, dengan tambahan scrollamount, dengan  scrollamount menjadi sangat cepat (tergantung nilai yang diberikan, disini saya menggunakan scrollamount=”20″).

<marquee behavior=”alternate” scrollamount=”20″>Teks</marquee>

6. Marquee 2.0.2
Membuat text berjalan pada web dan blog

Marquee 2.0.2 ini masih pengembangan dari Marquee 2.0.0 dengan sentuhan on-mouse-over stop dan on-mouse-out start, seperti marquee 1.0.1 yaitu jika kita arahkan mouse pada teks tersebut maka akan berhenti.

<marquee behavior=”alternate” onmouseover=”this.stop()” onmouseout=”this.start()”>Teks</marquee>

7. Marquee 3.0.0
Membuat text berjalan pada web dan blog

Marquee 3.0.0 adalah marquee climbing, marquee ini bergerak menaik yang bisa kita lighat geraknya dari bawah ke atas. Jika Anda memiliki teks yang banyak, maka marquee ini merupakan pilihan yang tepat untuk digunakan.

<marquee direction=”up”>Teks</marquee>

8. Marquee 3.0.1
Membuat text berjalan pada web dan blog

Marquee 3.0.1 adalah pengembangan dari marquee sebelumnya yang tidak mempunyai batas ruang, marquee ini kita batasi ruang kasatnya sehingga memiliki height 100 (panjang ke bawah 100) dengan  width=”100%” (akan menyesuaikan lebar tempat dimana marquee ini di tempatkan). Demikian dengan kemampuan scrollamountnya kita perlambat. Dan kita tambahkan on mouse stop/start juga yang jika mouse diarahkan teks itu maka teks akan berhenti, marquee ini yang saya pakai untuk membuat list posting (lihat di samping kanan blog ini).

<marquee direction=”up” onmouseover=”this.stop()” width=”100%” scrollamount=”2″ onmouseout=”this.start()” height=”100″>Teks</marquee>

9. Marquee 3.0.2
Membuat text berjalan pada web dan blog

Marquee 3.0.2 masih merupakan pengembangan dari marquee sebelumnya, hanya saja teks berada di tengah ruang kasat karena yang tidak diberi “height”.

<marquee direction=”up” width=”100%” scrollamount=”2″ height=”100″ align=”center”>Teks</marquee>

10. Marquee 3.0.3

Membuat text berjalan pada web dan blog

Marquee 3.0.3 adalah pengembangan juga dengan arah berlawanan dari marquee sebelumnya. (marquee climbing). kelebihan marquee ini yaitu teks akan bergerak menurun atau teks yang kita lihat bergerak dari atas ke bawah. Kemampuan scrollamountnya tidak kita batasi sehingga terlihat agresif dengan ruang kasat yang kecil. Bisa diperlambat dengan format html seperti diatas (diberi height=”100″).

<marquee direction=”down” width=”100%” height=”100″>Teks</marquee>

11. Membuat teks berkedip
Membuat text berjalan pada web dan blog

Untuk membuat teks berkedip seperti diatas sangat mudah dan simple. Tambahkan saja format html seperti dibawah ini :

<blink>Teks</blink>

Baik tutorial diatas merupakan sebagian kecil dari tips untuk mempercantik/membuat menarik halaman web atau blog agar membawa daya tarik bagi pengunjung. semoga bermanfaat 🙂
Wassalamu’alaikum

You may also like...