Cara Membuat Tulisan Berjalan di Blogger

RuangKata
Apr 21, 2021

 

Pada postingan kali ini kita akan sama-sama menambah wawasan ngeblog buat sesama pemula yang masih teramat dahaga akan hal-hal yang mungkin tak seberapa.

Sobat, kalian pasti pernah melihat sebuah blog/website yang menampilkan tulisan berjalan yang kurang lebih semacam ini:

SELAMAT DATANG DI RUANG KATA!


Oke, kami akan berbagi wawasan cara membuat tulisan berjalan seperti di atas dengan berbagai ragamnya untuk memperindah blog sobat.

Tulisan ini kami peruntukkan buat sobat pemula yang berminat untuk mengupgrade skill agar bisa memodifikasi tampilan blog. Karena kami masih sama pemulanya.  😄

Setelah sedikit mempelajari tulisan berjalan ini, kami jadi tahu bahwa dalam dunia per-blog-an tulisan berjalan atau running text  dikenal dengan nama “Marquee”.


Cara membuat tulisan berjalan (marquee) di website/blog


Kita bahas dari mulai yang dasar dulu.

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


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

Script :

<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

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

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

Script :

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

Preview :

Tulisan berjalan memantul

5. Tulisan berjalan Zig-zag

Script :

<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

Script :

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

Script :

<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

Script :

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

Script :

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

Script :

<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

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 :

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

Script :

<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

Script :

<marquee direction="right" scrollamount="10">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcMKoituKnjO3NgBRzxh4Nl33oiOo-KY7d4I1yptH7m-YQvpAvGhlfNkjhiLBwskemnqxxVIBC3ogxigbWO0jpg0bxfpGdz7YcBAcargFQ0QHAeYNd-nCY0AwFHcuJgtENlJiBkaSw06C-/s1600/Gambar-berjalan%25283%2529.gif" />
<img src="https://www.gambaranimasi.org/data/media/217/animasi-bergerak-kuda-0023.gif" />
<img src=https://www.gambaranimasi.org/data/media/217/animasi-bergerak-kuda-0023.gif" /> </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
DONE.

Demikianlah tutorial cara membuat tulisan berjalan (marquee) di website/blog yang bisa kami sharing di sini.


Semoga bermanfaat bagi sobat semua, dan selamat mencoba!
See you..


RuangKata

RuangKata

Ruang Bagi Kata-kata ...

Baca Selanjutnya Baca Sebelumnya
Komentar Netizen
Tulis Komentarmu
comment url