Cara Membuat Tulisan Berjalan di Blog Keren (Running Text)

Internet banyak digunakan untuk keperluan dari mencari informasi, berita, data, dan banyak hal lain seperti membuat website bisnis ataupun blog pribadi. Banyak yang mencari tahu bagaimana membuat tulisan berjalan seperti di layar televisi di website atau blog.

Simak baik-baik:

Kode Dasar Marquee

<marquee>Teks Berjalan</marquee>

Teks Berjalan

Sebagai dasar, teks secara default akan berjalan dari kanan ke kiri dan berulang terus-menerus.

Loop atau Perulangan Marquee

<marquee loop="5">Teks Berjalan berulang 5 kali</marquee>

Teks Berjalan berulang 5 kali

Loop menentukan banyak perulangan yang dilakukan marquee. Angka 5 menunjukkan jumlah perulangan, setelah berjalan 5 kali marquee tidak akan muncul lagi

Jeda Waktu Marquee

<marquee scrolldelay="500">Teks Berjalan dengan delay 0,5 detik</marquee>

Teks Berjalan dengan delay 0,5 detik

Scroll delay menunjukkan jeda waktu marquee. Angka 500 memiliki satuan milidetik, jadi sama dengan 0,5 detik. Teks akan berjalan setiap 0,5 detik.

Memberi Title Marquee

<marquee title="pesan tersembunyi">Teks Berjalan</marquee>

Teks Berjalan

Title memuat pesan yang akan aktif ketika kursor diarahkan ke marquee.

Warna Background Marquee

<marquee bgcolor="FFF300">Teks Berjalan dengan warna latar belakang kuning</marquee>

Teks Berjalan dengan warna latar belakang kuning

Bgcolor mengatur warna background marquee. FFF300 menunjukkan kode warna HTML untuk warna kuning, dapat diganti dengan warna dasar red,

green, blue, atau yellow.

Kecepatan Gerak Marquee

<marquee scrollamount="100">Teks Berjalan dengan kecepatan 100</marquee>

Teks Berjalan dengan kecepatan 100

Scrollamount mengatur kecepatan gerak marquee. Angka 100 menunjukkan kecepatannya 100, kecepatan normal adalah 6.

Arah Gerak Marquee

<marquee direction="right">Teks Berjalan ke arah kanan</marquee>

Teks Berjalan ke arah kanan

<marquee direction="down" height="100">Teks Berjalan ke arah bawah</marquee>

Teks Berjalan ke arah bawah

Direction akan mengatur arah gerak marquee. Right menunjukkan arah pergerakan marquee ke kanan. Ada 4 arah yang bisa Anda gunakan :
up untuk gerak ke atas
right untuk gerak ke kanan
down untuk gerak ke bawah
left untuk gerak ke kiri (default)

Lebar dan Tinggi Marquee

<marquee width="300">Lebar Teks Berjalan 300px</marquee>

Lebar Teks Berjalan 300px

<marquee height="100">Tinggi Teks Berjalan 100px</marquee>

Tinggi Teks Berjalan 100px

Width untuk mengatur lebar marquee, dan height untuk mengatur tinggi marquee. Masing-masing menggunakan px sebagai satuan.

Mengatur Jenis, Ukuran, dan Warna Font Marquee

<marquee style="font-family:arial; font-size:20px; color:#ffffff;">Jenis ukuran dan warna font pada Teks Berjalan</marquee>

Jenis ukuran dan warna font pada Teks Berjalan

Anda dapat mengatur jenis, ukuran, dan warna font menggunakan style.
font-family untuk jenis font
font-size untuk ukuran font
color untuk warna font

Sifat Marquee

<marquee behavior="alternate">Teks Berjalan memantul</marquee>

Teks Berjalan memantul

Behavior akan mengatur sifat marquee. Anda dapat mengatur marquee

dengan 3 nilai :
scroll : marquee menghilang ketika menabrak sisi kiri (default)
slide : marquee berhenti ketika menabrak sisi kiri
alternate : marquee memantul ketika menabrak sisi

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.

Membuat Gambar Berjalan

<marquee><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1g5XaroPDVb6B4K6TwA6pTxxBLhbYNAUSHOz58GFXTeSepa-dfQtOfqZX6v4TCaiRrhOM-7472-DyDM_wzc43a2I5QyiMmdwE-Q81YuWNdeSqCYoIGuVPRMS8dfYM9Szi3U9kpyloUdo/s1600/cara-membuat-teks-tulisan-berjalan-marquee.png" /></marquee>



Untuk membuat link pada teks yang berjalan, cukup dengan memasukkan

kode HTML pembentuk link di dalam kode dasar marquee.

Membuat Teks Berjalan Zig Zag

<marquee direction="up" scrollamount="2" align="center" behavior="alternate">

<marquee direction="right" behavior="alternate" height="30">Teks Berjalan Zig Zag

</marquee>

</marquee>

Teks Tulisan Zig Zag

Teks yang berjalan zig zag dapat dilakukan dengan menggabungkan 2 atribut direction (arah) dengan cara memasukkan teks berjalan diantara 2 marquee yang memiliki atribut arah berbeda. Dalam contoh kita gunakan arah up dan

right sehingga membentuk zig zag.

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

7. Teks bergerak mondar- mandir dari atas ke bawah

<marquee direction="up" scrollamount="2" align="center" behavior="alternate"> Contoh Tulisan Berjalan </marquee>

8. Teks bergerak zig - zag ( diagonal ) memantul

<center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right" behavior="alternate"> Contoh Tulisan Berjalan </marquee></marquee></center>

9. Teks bergerak zig - zag ( diagonal ) tembus

<center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right"> Contoh Tulisan Berjalan </marquee></marquee></center>

Cara memasang :

1. Login ke akun blog sobat

2. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript

3. Masukkan kode marquee dari salah satu tulisan berjalan diatas

4. Klik save dan lihat hasilnya.

tambahan :
Direction : untuk mengatur pola gerakan teks (left, right, up dan down)
Scrollamount : untuk mengatur kecepatan gerakan teks. Naikkan angkanya ( dari 2 menjadi 3 ) untuk mempercepat gerakan dan sebaliknya.
Behavior ( scroll/slide/alternate ): untuk mengatur prilaku gerakan.
Untuk menambahkan background, padding, border, color, dll pada marquee, silahkan sisipkan kode marquee antara kode berikut

<div style="background: #000000; border: 2px solid #FF0000; color: white; font-size: 20px; font-weight: bold; letter-spacing: 0.5em; padding: 15px;">

<marquee direction="left" scrollamount="6" align="center">Contoh Tulisan Berjalan</marquee>
</div>

Untuk menyisipkan link pada marquee, gunakan kode berikut :

<div style="background: #FFFFFF; border: 2px solid #FF0000; color: black; font-size: 20px; font-weight: bold; letter-spacing: 0.2em; padding: 15px;">

<marquee direction="left" scrollamount="6" align="center"><a href="http://christiantatelu.blogspot.com/2012/03/cara-membuat-teks-berjalan-di-blog.html"/>Cara Membuat Teks Berjalan di Blog</a></marquee>

</div>

catatan :

ganti tulisan yang berwana biru dengan Url yang di inginkan.

hasilnya :

Cara Membuat Tulisan Berjalan di Blog
Contoh lain penggunaan link pada marquee yaitu dengan menggunakan kode berikut :


<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center">

<a href=" http://christiantatelu.blogspot.com/2012/03/cara-membuat-permalink-di-blog.html/">cara membuat permalink di blog</a><br/>

<a href="http://christiantatelu.blogspot.com/2012/03/cara-membuat-logo.html">cara membuat logo</a><br/>

<a href="http://christiantatelu.blogspot.com/2012/03/blog-di-blogspot-dan-blog-di-wordpress.html">blog di blogspot dan blog di wordpress</a><br/>
</marquee>

Sekian posting cara bikin tulisan berjalan nya....

Kombinasi marquee dapat dilakukan dengan menggabungkan beberapa

atribut sekaligus. Anda sudah mengetahui dasar-dasar membuat marquee, silahkan mengkreasikan marquee Anda sendiri.

Terima kasih telah membaca artikel Jika ada pertanyaan, silahkan sampaikan

di kotak komentar.

Share :