Tulisan Bergerak

Cara membuat tulisan bergerak/berjalan (Marquee) di Blog Anda

Di sini saya ingin kongsikan dengan anda Kod Bergerak untuk tulisan mahupun gambar.

Contohnya, seperti di bawah ini :

Selamat Datang Ke Portal Cara Mudah Buat Blog

Di sini ada tips dan cara membuat tulisan di blog anda bergerak/berjalan (marquee).

Mari kita ketahui dulu :

Apa itu Marquee?

Marquee adalah salah satu kod bahasa program HTML (HyperText Markup Language), untuk menjadikan tulisan atau gambar boleh berjalan dan bergerak.

Bagaimana cara untuk membuatkan tulisan bergerak / berjalan (marquee) di blog anda?

Cara untuk membuat tulisan bergerak / berjalan (marquee) di blog, bukanlah perkara yang sulit atau sukar. Sebenarnya mudah kalau anda sudah tahu bagaimana cara untuk membuat kod HTML nya.

Di bawah ini adalah Kod Asas Tag Marquee :

<marquee> TULISAN BERJALAN </marquee>

Secara umumnya, tulisan anda akan berjalan dari kanan ke kiri dan berulang terus-menerus.

Preview seperti berikut :

TULISAN BERJALAN

Namun kita boleh mengubahsuai pergerakannya dengan beberapa variasi pergerakan tulisan sesuka hati.

Berikut ada beberapa jenis Kod dalam Attribute Marquee :

Attribute & Value	Description
direction = "left/right/up/down"	Mengatur arah gerakan teks
behavior="scroll/slide/alternate" Note : scroll (bergerak secara berputar) slide (sekali lalu dan berhenti) *alternate (bolak-balik)	Mengatur perilaku gerakan teks Seperti : bergerak sekali lalu berhenti, berputar, atau bolak-balik
align = “left/right/center/justify”	Mengatur kedudukan teks
bgcolor ="warna/kod warna"	Memberi warna tulisan
scrollamount="angka"	Mengatur kecepatan gerakan, semakin besar angka semakin cepat gerakannya
scrolldelay="angka"	Mengatur waktu tunda gerakan dalam mili detik/saat
loop = "angka \|-1\| infinite"	Mengatur jumlah pengulangan (loop)
width="px atau %"	Mengatur lebar blok teks dalam pixel atau dalam peratusan
height ="px atau %"	Mengatur tinggi blok teks dalam pixel atau dalam peratusan
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 dan bawah teks
Catatan : Silakan anda hiasi dengan menggabungkan sifat-sifat marquee ini. Bahkan anda boleh menampilkannya bersesuaian dengan keinginan anda, menggabungkannya dengan kod program CSS.

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

Contoh Kod Script seperti di bawah ini :

<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 bawah Tulisan berjalan ke atas

Atau dengan gerakan menjauh, silakan posisi/kedudukannya script-nya dibalikkan.

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 berlawananTulisan berjalan berlawanan arah >>

4. Tulisan berjalan memantul (berbolak-balik)

Script :

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

Preview :

Tulisan berjalan secara memantul

5. Tulisan berjalan Zig-zag

Script :

<marquee behavior ="alternate" direction = "up" height="60px" scrollamount="30"> 
<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 bersifat "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
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> 
<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 (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)
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://abdulsyaafi.blogspot.com/"> Sila Layari Portal Ini </a> 
<a href="https://abdulsyaafi.blogspot.com/2021/01/cara-mudah-buat-blog-langkah-1.html"> Cara Mudah Buat Blog : Langkah 1</a> 
<a href="https://abdulsyaafi.blogspot.com/2021/01/cara-mudah-buat-blog-langkah-2.html"> Cara Mudah Buat Blog : Langkah 2 </a> </marquee>

Previeuw :

Sila Layari Portal Ini

Cara Mudah Buat Blog : Langkah 1

Cara Mudah Buat Blog : Langkah 2

13. Tulisan berjalan dengan bersifat "Loop"

*Tulisan ini berjalan hanya 5 kali putaran. Selepas itu, tulisan ini akan berhenti. Untuk melihat gerakannya kembali, silakan di-Refresh terlebih duhulu..

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)
Tulisan berjalan berulang (loop)

14. Gambar berjalan dengan tag Marquee

Script :

Preview :

Sebagai catatan : Silakan ganti "Value" sesuai keinginan anda.

Sebagai Contoh :

BIAR HIDUP BERBAKTISEMOGA BERJAYA
ILMU PELITA HIDUP TEKADKAN AZAM << SELAMAT DATANGSELAMAT DATANG >>
TERIMA KASIH MELAWAT >> <<TERIMA KASIH MELAWAT
Ilmu jika tak diamal seperti pokok tidak berbuah
Jumpa lagi..!

Bagaimana cara meletakkan tulisan bergerak / berjalan di blog?

Ada dua cara yang boleh anda gunakan, iaitu melalui editor artikel dan melalui widget.

Pertama, Melalui Editor Artikel

Caranya :

Masuk ke Dashboard
Buat Posting/New Entry
Tulis kandungan isi seperti biasa sampai selesai
Ganti mode penulisan dari “Compose” menjadi “HTML”
Copy script tulisan berjalan yang anda mahukan, dan Paste -kan Script tersebut di kedudukan yang anda mahukan.
Kembali ganti mode penulisan dari “HTML” menjadi "Compose", lalu edit “Tulisan berjalan..!” ganti dengan tulisan yang anda inginkan untuk digerakkan.
Silahkan klik "Preview" untuk memastikan Script sudah berjalan.
Terakhir, kalau sudah berjalan dan kedudukannya sudah ok dan sempurna. Maka bolehlah di Publish.