Membuat Tulisan Berjalan di Blog

Mas Azer
Sep 21, 2024
SELAMAT DATANG DI BLOG BUNGAZER! SELAMAT MEMBACA.


Artikel ini diperuntukkan buat sobat pemula. 

Ingin Blog kamu punya tampilan seperti di atas?
Oke, saya akan bagikan cara dan kode-kode HTML yang kamu butuhkan untuk membuatnya di sini.

Jadi tips kali ini adalah cara membuat tulisan berjalan atau dalam dunia web biasa disebut dengan nama marquee.


Dalam dunia blog, tentunya teks menjadi pilar utama, karena itu, kita sebagai Author perlu berkreasi pada tulisan di blog kita untuk 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), atau di pinggir jalan, lebih-lebih di waktu malam bakalan menyala ramai banget tuh tulisan berjalan dengan macam-macam keunikannya.

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. Gampang sebenarnya kalau sudah tau caranya. Ehm.. susah-susah gampang ding! Tapi nggak seru khan kalau belum dicoba?? Asyik.. 😁

Disini saya akan mencoba membuat beberapa jenis marquee yang bisa kalian pilih. Namun terlebih dulu kita belajar membuat Script -nya dan lihat Preview -nya.

Kita bahas dari mulai yang mendasar dulu yah. PERHATIKAN!!

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 yekan, kalau gerakannya monoton itu-itu saja. Jangan kecewa pemirsah, 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 berjalan
behavior=“scroll/slide/alternate”
Note :
*scroll (bergerak berputar)
*slide (sekali lalu berhenti)
*alternate (bolak-balik)
Mengatur perilaku gerakan teks berjalan
Seperti : bergerak sekali lalu berhenti, berputar, atau bolak-balik
align = “left/right/center/justify”
Mengatur posisi teks berjalan
bgcolor =“warna/kode warna”
Memberi warna tulisan berjalan
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 berjalan dalam pixel atau persen
height =“px atau %”
Mengatur tinggi blok teks berjalan dalam pixel atau persen
title=“pesan”
Pesan akan muncul saat mouse berada di atas teks berjalan
onmouseover = “this.stop()”
Menghentikan teks saat disorot mouse
onmouseout = “this.start()”
Menjalankan teks ketika mouse menjauh
hspace = “px”
Mengatur jarak kiri-kananya teks berjalan
vspace = “px”
Mengatur jarak atas-bawahnya teks berjalan
📍Catatan : Silakan sobat berkreasi dengan mengkombinasikan atribut marquee ini. Bahkan kita bisa dekorasi tampilannya sesuai keinginan, menggabungkannya dengan kode program CSS.

FYI, tulisan ini hanya bisa berjalan Vertikal & Horizontal yah. Tidak bisa berjalan dari arah pojok, jadi jangan harap tulisan ini bisa datang berjalan sendiri dari pojokan dan langsung masuk ke hatimu. Eh buset!!

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.

Okey! Daripada tambah puyeng pala Kapten! Langsung saja kita meluncur ke TKP. Check it out gaes :

1. Tulisan berjalan dari kanan ke kiri, atau dari kiri ke kanan

Kode:

<marquee direction="left" scrollamount="10"> Tulisan berjalan ke kiri </marquee><br />
<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

Kode:

<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 yah sob.

Preview :

Tulisan berjalan ke atasTulisan berjalan ke bawah


3. Tulisan berjalan memusat atau berlawanan arah (kiri - kanan)

Kode:

<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 Bo)

Kode:

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

Preview :

Tulisan berjalan memantul

5. Tulisan berjalan Zig-zag

Kode:

<marquee behavior ="alternate" direction = "up" height="60px" scrollamount="30"> <br />
<marquee direction="right" scrollamount="6"> Tulisan berjalan zig-zag </marquee> </marquee>

Preview :


Tulisan berjalan zig-zag

6. Tulisan berjalan melayang

Kode:

<marquee behavior="alternate" direction="up" height="100" scrollamount="6" weight="460">
<marquee behavior="alternate" direction="right"> Tulisan berjalan melayang </marquee> </marquee>

Preview :

Tulisan berjalan melayang

7. Tulisan berjalan dengan atribut "behavior"

Kode:

<marquee behavior="scroll" scrollamount="10" width="460">Tulisan berjalan (scroll) </marquee><br />
<marquee behavior="slide" scrollamount="10" width="460"> Tulisan berjalan (slide) </marquee><br />
<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

Kode:

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

Preview :

Tulisan berjalan dengan kecepatan
Tulisan berjalan dengan kecepatan
Tulisan berjalan dengan kecepatan

9. Tulisan berjalan dengan atribut "vspace"

Kode:

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

Preview :

Tulisan berjalan (vspace)
Tulisan berjalan (vspace)
Tulisan berjalan (space)

10. Tulisan berjalan dengan "hspace"

Kode:

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

Preview :
Tulisan berjalan (hspace)
Tulisan berjalan (hspace)
Tulisan berjalan (hspace)

11. Tulisan berjalan dengan Background

Kode:

<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.

Kode:

<marquee align="center" direction="up" height="200" onmouseout ="this.start()" onmouseover = "this.stop()" scrollamount="2" width="100%">
<a href="http://ricohaloho.blogspot.com/2018/10/tentang-media-sosial.html?"> Tentang media sosial </a><br />
<a href="http://ricohaloho.blogspot.com/2019/02/katakan-adios-untuk-hoax.html?"> Katakan "adios" untuk hoax</a><br />
<a href="http://ricohaloho.blogspot.com/2019/04/menulis-nakal-jelang-pilpres-2019.html?"> Menulis nakal jelang Pilpres </a><br /> </marquee>

Previeuw :


13. Tulisan berjalan dengan atribut "Loop"

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

Kode:

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

Preview :

Tulisan berjalan berulang (loop)
Tulisan berjalan berulang (loop)

14. Gambar berjalan dengan tag Marquee

Kode:

<marquee direction="right" scrollamount="10">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJbE0sRE7G5R48FltsQgVowDZYGz_GFpyKGxR5w_KVLk8JpwYH-2YbeD5EQsxjgrDRcZ4y0lKV5amOIOJz9eThuWFzeR4MxPnaeGffa1wrYzifRPfxM0CZjPxt3Ke3qZy4STX7nXvQM0U7/s1600/Gambar-berjalan%25283%2529.gif" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJbE0sRE7G5R48FltsQgVowDZYGz_GFpyKGxR5w_KVLk8JpwYH-2YbeD5EQsxjgrDRcZ4y0lKV5amOIOJz9eThuWFzeR4MxPnaeGffa1wrYzifRPfxM0CZjPxt3Ke3qZy4STX7nXvQM0U7/s1600/Gambar-berjalan%25283%2529.gif" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjflbQc2GPBp-BD1saO20vggE8nRoqOFbK4hE6ktFkaVdNOlHwbRQdVLYaxgWjWhbpRhz1dOAWq0Vz-0u-bWTYDqwD_oYp0128vo4nhZiNPaNMZuex2X2riiuMsEa0zgsZGSOwWPSajEiMa/s1600/Gambar-berjalan.jpg" /> </marquee>

Preview :

 

Cukuplah yekan! Sobat tinggal mainkan aje atribut marquee di atas. Misalnya, 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..!

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
cara-membuat-tulisan-berjalan-di-blog

  • Pilih gadget HTML/JavaScript
  • Copy & Paste -kan tulisan berjalan pada bagian konten.
  • Pastikan sobat melihat tulisan Rich Text
cara-membuat-tulisan-berjalan-di-blog
  • Save
Selesai. 

Demikian tutorial cara membuat tulisan berjalan (marquee) di website/blog yang bisa saya bagikan di sini.


Bagi sobat yang tertarik, silahkan berkreasi sendiri untuk menghias website/blog menjadi lebih menarik.

Semoga bermanfaat bagi sobat semua, dan sukses dalam segala urusan. Amin! 
Terima kasih

Sumber Tulisan: ricohaloho.blogspot.com




Mas Azer

Mas Azer

Blogger Pelukis kata ...

Baca Selanjutnya Baca Sebelumnya
Komentar Netizen
Tulis Komentarmu
comment url