Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Tutorial

Cara Membuat Tulisan Berjalan (Marquee) di Website/Blog

Oleh Kezya Wulandari Dilihat 0 x

Cara Membuat Tulisan Berjalan (Marquee) di Website/Blog


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

 Karena teks yang berjalan cukup menarik perhatian, pemilik blog sering memanfaatkan marquee untuk memberikan informasi yang bersifat penting kepada pengunjung blog mereka.

 Marquee dapat dibuat dengan mudah dengan kode HTML. Kali ini kami akan berbagi kode-kode HTML untuk membuat berbagai macam marquee lengkap dengan variasi dan atribut-atributnya.

Kode Dasar Marquee

<marquee> TULISAN BERJALAN </marquee>

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

Preview :

TULISAN BERJALAN


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


 Silahkan Anda berkreasi dengan mengkombinasikan atribut marquee ini. Bahkan Anda dapat mendekorasi tampilannya sesuai keinginan, menggabungkannya dengan kode program CSS.

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 Bawah Tulisan Berjalan ke Atas

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

Preview :

Tulisan Berjalan ke Atas Tulisan 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 Memusat Tulisan Berjalan arah Memusat >><< Tulisan Berjalan Berlawanan ArahTulisan Berjalan Berlawanan Arah >>

4. Tulisan Berjalan Bolak Balik (Memantul)

Script :


<marquee behavior="alternate" scrollamount="10"> Tulisan Berjalan Bolak Balik (Memantul) </marquee>

Preview :

Tulisan Berjalan Bolak Balik (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="400">

<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="blue" scrollamount="10" width="450"> Tulisan berjalan (vspace) </marquee><br />

<marquee bgcolor="red" 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="blue" hight="100" width="400"> Tulisan Berjalan (hspace) </marquee> <br />

<marquee bgcolor="red" 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="https://songondia.blogspot.com/2020/12/cara-hack-akun-tiktok-dengan-termux.html?"> Cara Hack Akun Tiktok Dengan Termux </a><br />

<a href="https://www.tamboenman.eu.org/2020/12/cara-mengatasi-baterai-laptop-0.html?"> Cara Mengatasi Baterai Laptop 0% Available (Plugged in, Charging)</a><br />

<a href="https://www.tamboenman.xyz/2019/08/cara-membuat-tulisan-berjalan-di-blog.html?"> Cara Membuat Tulisan Berjalan di Blog </a><br /> </marquee>

Preview :


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="460"> 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/AVvXsEjIeaYpm3w0g1MxsKxF-1jbGKNMJXuubzwSb86FC5STE19bHrQeK2Ry92CDlI9PAxNvM2aOKemmmFCS3pd3U6JMwz1MdSoqKESsJIK_9rBDuWPlZHF6wzJI3It6qwdQOsdL3RY3JV2bS1EO/s400/Pacuan+Kuda.gif" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIeaYpm3w0g1MxsKxF-1jbGKNMJXuubzwSb86FC5STE19bHrQeK2Ry92CDlI9PAxNvM2aOKemmmFCS3pd3U6JMwz1MdSoqKESsJIK_9rBDuWPlZHF6wzJI3It6qwdQOsdL3RY3JV2bS1EO/s400/Pacuan+Kuda.gif" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIeaYpm3w0g1MxsKxF-1jbGKNMJXuubzwSb86FC5STE19bHrQeK2Ry92CDlI9PAxNvM2aOKemmmFCS3pd3U6JMwz1MdSoqKESsJIK_9rBDuWPlZHF6wzJI3It6qwdQOsdL3RY3JV2bS1EO/s400/Pacuan+Kuda.gif" /> </marquee>

Preview :


 Anda tinggal memainkan atribut marquee di atas. Misalnya, dengan menggabungkan beberapa script HTML. Sebagai catatan : Silahkan ganti "value" sesuai keinginan Anda.

Contoh :

TamboenmanTamboenman
Tamboenman Tamboenman << Selamat Datang di Blog SayaSelamat Datang di Blog Saya >>
Terima Kasih Atas Kunjungannya >> <<Terima Kasih Atas Kunjungannya
Minds are like parachutes They only function when open

Cara Memasang Tulisan Berjalan di Website/Blog

Ada dua cara yang bisa digunakan, 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
 Bagi Anda yang tertarik, silahkan berkreasi sendiri untuk menghias website/blog menjadi lebih menarik. Atau siapa tahu ada yang ingin mencoba bereksperimen dengan membuat tulisan berjalan model baru gitu!.

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

Posting Komentar untuk "Cara Membuat Tulisan Berjalan (Marquee) di Website/Blog"

1. Relevan (Tidak Out of Topic).
2. Sopan, jangan meninggalkan komentar SPAM di blog saya.
3. Jangan menggunakan bahasa kasar atau SARA.
4. Berilah masukan yang membangun kecerdasan berpikir.
Terima kasih atas perhatiannya!