Cara Membuat Tulisan Berjalan (Marquee) di Website/Blog ~ Computer-Sphinx

Memberikan kesan yang indah dan menarik bagi para pembaca blog kita nantinya. Salah satunya, memberi sedikit sentuhan seni animasi yaitu membuat tulisan/teks berjalan.

Sering kan lihat tulisan/teks berjalan? Entah itu di layar televisi, tempat periklanan (Billboard) di pinggir jalan counter biasanya rame banget tuh dengan berbagai macam gerakan.

Nah dalam dunia Web-pro, tulisan/teks berjalan atau running text lebih dikenal dengan nama “Marquee”.

Apa itu Marquee?

Marquee adalah salah satu kode bahasa program HTML (HyperText Markup Language), untuk membuat efek tulisan/gambar menjadi berjalan atau bergerak.

Bagaimana cara membuat tulisan berjalan (marquee) di website/blog?

Cara membuat tulisan berjalan (marquee) di website/blog, bukanlah perkara yang sulit.

Kode Dasar Tag Marquee :

<marquee> TULISAN BERJALAN </marquee>

Secara default, teks akan berjalan dari kanan ke kiri dan berulang terus-menerus.

Preview :

TULISAN BERJALAN

Tapi kurang seru kalau gerakannya monoton itu-itu saja. Karena tag marquee memiliki beberapa attribute yang bisa kita kombinasikan untuk membuat beberapa variasi gerakan tulisan sesuka hati.

Berikut beberapa Atribut Marquee :

Attribute & Value	Description
direction = "left/right/up/down"	Mengatur arah gerakan teks
behavior="scroll/slide/alternate" Note : scroll (bergerak berputar) slide (sekali lalu berhenti) *alternate (bolak-balik men)	Mengatur perilaku gerakan teks Seperti : bergerak sekali lalu berhenti, berputar, atau bolak-balik
align = “left/right/center/justify”	Mengatur posisi teks
bgcolor ="warna/kode warna"	Memberi warna tulisan
scrollamount="angka"	Mengatur kecepatan gerakan, semakin besar angka semakin cepat gerakannya
scrolldelay="angka"	Mengatur waktu tunda gerakan dalam mili detik
loop = "angka \|-1\| infinite"	Mengatur jumlah perulangan (loop)
width="px atau %"	Mengatur lebar blok teks dalam pixel atau persen
height ="px atau %"	Mengatur tinggi blok teks dalam pixel atau persen
title="pesan"	Pesan akan muncul saat mouse berada di atas teks
onmouseover = “this.stop()”	Menghentikan teks saat disorot mouse
onmouseout = “this.start()”	Menjalankan teks ketika mouse menjauh
hspace = "px"	Mengatur jarak kiri-kananya teks
vspace = "px"	Mengatur jarak atas-bawahnya teks
Catatan : Silahkan sobat berkreasi dengan mengkombinasikan atribut marquee ini. Bahkan kita bisa dekorasi tampilannya sesuai keinginan, menggabungkannya dengan kode program CSS.

Tulisan ini hanya bisa berjalan Vertikal & Horizontal. Tidak bisa berjalan dari arah pojok, jadi jangan harap tulisan ini bisa datang berjalan sendiri dari pojokan.

Mari kita sama-sama belajar membuat tulisan bejalan di website/blog, dengan script HTML marquee. Silahkan ganti "TULISAN BERJALAN" dengan pesan singkat yang hendak kalian sampaikan.

1. Tulisan Berjalan dari Kanan ke Kiri, atau dari Kiri ke Kanan

Script:

<marquee direction="left" scrollamount="10"> Tulisan berjalan ke kiri </marquee>

<marquee direction="right" scrollamount="10"> Tulisan bejalan ke kanan </marquee>

Preview:

Tulisan berjalan ke kiri

Tulisan berjalan ke kanan

2. Tulisan Berjalan dari Atas ke Bawah, atau dari Bawah ke Atas

Script:

<marquee align="center" direction="down" scrollamount="3"> Tulisan berjalan ke bawah </marquee><marquee align="center" direction="up" scrollamount="3"> Tulisan berjalan ke atas </marquee>

Preview:

Tulisan berjalan ke bawahTulisan berjalan ke atas

Atau dengan gerakan menjauh, silahkan posisi script-nya dibalik.

Preview:

Tulisan berjalan ke atasTulisan berjalan ke bawah

3. Tulisan Berjalan Memusat atau Berlawanan Arah (kiri-kanan)

Script:

<marquee direction="right" width="50%"> Tulisan berjalan arah memusat</marquee><marquee direction="left" width="50%"> Tulisan berjalan arah memusat </marquee><marquee width = "50%"> Tulisan berjalan berlawanan arah </marquee><marquee direction="right" width="50%"> Tulisan berjalan berlawanan arah </marquee>

Preview:

<< Tulisan berjalan arah memusatTulisan berjalan arah memusat >><< Tulisan berjalan berlawananTulisan berjalan berlawanan arah >>

4. Tulisan Berjalan Memantul (bolak-balik)

Script:

<marquee behavior="alternate" scrollamount="10"> Tulisan berjalan memantul </marquee>

Preview:

Tulisan berjalan memantul

5. Tulisan Berjalan Zig-zag

Script:

<marquee direction="right" scrollamount="6"> Tulisan berjalan zig-zag </marquee> </marquee>

Preview:

Tulisan berjalan zig-zag

6. Tulisan Berjalan Melayang

Script:

<marquee behavior="alternate" direction="right"> Tulisan berjalan melayang </marquee> </marquee>

Preview:

Tulisan berjalan melayang

7. Tulisan berjalan dengan Atribut "behavior"

Script:

<marquee behavior="scroll" scrollamount="10" width="460">Tulisan berjalan (scroll) </marquee>

<marquee behavior="slide" scrollamount="10" width="460"> Tulisan berjalan (slide) </marquee>

<marquee behavior="alternate" scrollamount="10" width="460"> Tulisan berjalan (alternate) </marquee>

Preview:

Tulisan berjalan (scroll)

Tulisan berjalan (slide)

Tulisan berjalan (alternate)

8. Tulisan Berjalan dengan Kecepatan

Script:

<marquee width="450"> Tulisan berjalan dengan kecepatan </marquee> <marquee scrollamount="15" width="450"> Tulisan berjalan dengan kecepatan </marquee>

<marquee scrollamount="25" width="450"> Tulisan berjalan dengan kecepatan </marquee>

Preview:

Tulisan berjalan dengan kecepatan

9. Tulisan Berjalan dengan Atribut "vspace"

Script:

<marquee bgcolor="red" scrollamount="10" width="450"> Tulisan berjalan (vspace) </marquee>

<marquee bgcolor="yellow" scrollamount="10" vspace="15" width="450"> Tulisan berjalan (vspace) </marquee> <marquee bgcolor="green" scrollamount="10" vspace="15" width="450"> Tulisan berjalan (vspace) </marquee>

Preview:

Tulisan berjalan (vspace)

Tulisan berjalan (space)

10. Tulisan Berjalan dengan "hspace"

Script:

<marquee bgcolor="red" hight="100" width="400"> Tulisan berjalan (hspace) </marquee>

<marquee bgcolor="yellow" hight="100" hspace="15" width="400"> Tulisan berjalan (hspace) </marquee> <marquee bgcolor="green" hight="100" hspace="40" width="400"> Tulisan berjalan (hspace) </marquee>

Preview:

Tulisan berjalan (hspace)

11. Tulisan Berjalan dengan Background

Script :

<marquee align ="center" direction ="left" scrollamount="10"> Tulisan berjalan dengan background </marquee>

Preview :

Tulisan berjalan dengan background

12. Tulisan Berjalan dengan Link, dan akan Berhenti ketika Pointer Diletakkan di atasnya.

Script :

<a href="http://ricohaloho.blogspot.com/2018/10/tentang-media-sosial.html?"> Tentang media sosial </a>

<a href="http://ricohaloho.blogspot.com/2019/02/katakan-adios-untuk-hoax.html?"> Katakan "adios" untuk hoax</a>

<a href="http://ricohaloho.blogspot.com/2019/04/menulis-nakal-jelang-pilpres-2019.html?"> Menulis nakal jelang Pilpres </a> </marquee>

Previeuw :

Tentang media sosial

Katakan "adios" untuk hoax

Menulis nakal jelang Pilpres

13. Tulisan Berjalan dengan Atribut "Loop"

*Tulisan ini berjalan hanya 5x puteran. Habis itu, tulisan berhenti. Untuk melihat gerakan, silahkan di-refresh dulu ya.

Script :

<marquee loop="5" width="450"> Tulisan berjalan dengan loop </marquee> <marquee behavior ="slide" loop="5" width="450"> Tulisan berjalan dengan loop </marquee>

Preview :

Tulisan berjalan berulang (loop)

14. Gambar Berjalan dengan Tag Marquee

Script :

Preview :

Dengan menggabungkan beberapa script HTML. Sebagai catatan: Silahkan ganti "value" sesuai keinginan kalian.

Contoh :

RICO HALOHORICO HALOHO

RICO HALOHORICO HALOHO << Welcome to my BlogWelcome to my Blog >>

Thanks for visiting >><<Thanks for visiting

Despresso adalah perasaan yang kau alami ketika kehabisan kopi

Kopi boleh minta..!

Membuat Link pada Marquee

<marquee><a href="http://carabelajartutorial.blogspot.com/2016/09/cara-membuat-tulisan-berjalan-di-blog.html">Cara Membuat Tulisan Berjalan</a></marquee>
Cara Membuat Tulisan Berjalan

Untuk membuat link pada teks yang berjalan, cukup dengan memasukkan kode HTML pembentuk link di dalam kode dasar marquee.

Kombinasi Atribut Marquee

<div style="text-align: center;">
<span style="font-size: x-large;">
<marquee bgcolor="black" style="color: red;" direction="left" width="130">
<b>&lt;&lt;</b><b> MACAM &gt;&gt;</b>
</marquee>
<marquee bgcolor="black" style="color: blue;" direction="right" width="130">
<b>&lt;&lt; MACAM &gt;&gt;</b>
</span>
</marquee>
</div>
<< MACAM >><< MACAM >>

Kombinasi marquee dapat dilakukan dengan menggabungkan beberapa atribut sekaligus. Anda sudah mengetahui dasar-dasar membuat marquee, silahkan mengkreasikan marquee Anda sendiri.

Bagaimana cara memasang tulisan berjalan di website/blog?

Ada dua cara yang bisa kita gunakan, yaitu melalui editor artikel dan melalui widget.

Pertama, Melalui Editor Artikel

Caranya :

Masuk ke Dashboard
Buat Posting/New Entry
Tulis konten seperti biasa sampai selesai
Ganti mode penulisan dari “Compose” menjadi “HTML”
Copy script tulisan berjalan yang kalian suka, dan Paste -kan Script tersebut pada posisi yang kalian mau.
Kembali ganti mode penulisan dari “HTML” menjadi "Compose", lalu edit “Tulisan berjalan..!” ganti dengan tulisan sobat yang mau dijalankan.
Silahkan klik "Pratinjau" untuk memastikan script sudah berjalan.
Terakhir, kalau sudah berjalan dan posisinya sudah pas. Silahkan dipublish.

Kedua, Melalui Widget

Caranya :

Masuk ke Dashboard
Pada Menu sisi kiri, Pilih Tata Letak/Layout
Klik Tambahkan Gadget Baru

Pilih gadget HTML/JavaScript
Copy & Paste -kan tulisan berjalan pada bagian konten.
Pastikan sobat melihat tulisan Rich Text

Save

Computer-Sphinx

Saturday 27 February 2021