Memberikan kesan yang indah dan menarik bagi para pembaca blog kita nantinya. Salah satunya, memberi sedikit sentuhan seni animasi yaitu membuat tulisan/teks berjalan.
Tulisan berjalan ke atas Tulisan berjalan ke bawah
<< Tulisan berjalan arah memusat Tulisan berjalan arah memusat >> << Tulisan berjalan berlawanan Tulisan berjalan berlawanan arah >>
RICO HALOHO RICO HALOHO
RICO HALOHO RICO HALOHO << Welcome to my Blog Welcome to my Blog >>
Thanks for visiting >> <<Thanks for visiting
Cara Membuat Tulisan Berjalan
Untuk membuat link pada teks yang berjalan, cukup dengan memasukkan kode HTML pembentuk link di dalam kode dasar marquee.
<< MACAM >> << MACAM >>
Kombinasi marquee dapat dilakukan dengan menggabungkan beberapa atribut sekaligus. Anda sudah mengetahui dasar-dasar membuat marquee, silahkan mengkreasikan marquee Anda sendiri.
Sering kan lihat tulisan/teks berjalan? Entah itu di layar televisi, tempat periklanan (Billboard) di pinggir jalan counter biasanya rame banget tuh dengan berbagai macam gerakan.
Nah dalam dunia Web-pro, tulisan/teks berjalan atau running text lebih dikenal dengan nama “Marquee”.
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.
Kode Dasar Tag Marquee :
<marquee> TULISAN BERJALAN </marquee>
Secara default, teks akan berjalan dari kanan ke kiri dan berulang terus-menerus.
Preview :
Tapi kurang seru kalau gerakannya monoton itu-itu saja. 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. |
Tulisan ini hanya bisa berjalan Vertikal & Horizontal. Tidak bisa berjalan dari arah pojok, jadi jangan harap tulisan ini bisa datang berjalan sendiri dari pojokan.
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.
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:
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:
Atau dengan gerakan menjauh, silahkan posisi script-nya dibalik.
Preview:
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:
4. Tulisan Berjalan Memantul (bolak-balik)
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/AVvXsEi3FpT4iqFgIaJ2V9Khp5tWyEdqvTMLvdsJfYxSgH4ANCbPUtkTu2dC5ga7pEoVdhwgh9tLgxVAAWwwOvL33NPe0n6UZziv_5CfZrOR4dIdjplFepqkCQdhLzdP587RHLUo0h0IYi_M3_vj/s1600/Gambar-berjalan%25283%2529.gif" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3FpT4iqFgIaJ2V9Khp5tWyEdqvTMLvdsJfYxSgH4ANCbPUtkTu2dC5ga7pEoVdhwgh9tLgxVAAWwwOvL33NPe0n6UZziv_5CfZrOR4dIdjplFepqkCQdhLzdP587RHLUo0h0IYi_M3_vj/s1600/Gambar-berjalan%25283%2529.gif" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4uynoOgyZdMgdYR8uFIysZDChs96E9wq7YssjniusPTb4hQyvj9FlgceSzdLEC1E3dgfStytHa68tx9q3mEwleSidp2gsuaFN0eRzNJIfDMbly0gia4PQ8kYpS3NGnABex4alyYeGttey/s1600/Gambar-berjalan.jpg" /> </marquee>
Preview :
Dengan menggabungkan beberapa script HTML. Sebagai catatan: Silahkan ganti "value" sesuai keinginan kalian.
Contoh :
Despresso adalah perasaan yang kau alami ketika kehabisan kopi
Kopi boleh minta..!
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>
Untuk membuat link pada teks yang berjalan, cukup dengan memasukkan kode HTML pembentuk link di dalam kode dasar marquee.
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><<</b><b> MACAM >></b>
</marquee>
<marquee bgcolor="black" style="color: blue;" direction="right" width="130">
<b><< MACAM >></b>
</span>
</marquee>
</div>
<span style="font-size: x-large;">
<marquee bgcolor="black" style="color: red;" direction="left" width="130">
<b><<</b><b> MACAM >></b>
</marquee>
<marquee bgcolor="black" style="color: blue;" direction="right" width="130">
<b><< MACAM >></b>
</span>
</marquee>
</div>
Kombinasi marquee dapat dilakukan dengan menggabungkan beberapa atribut sekaligus. Anda sudah mengetahui dasar-dasar membuat marquee, silahkan mengkreasikan marquee Anda sendiri.
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
- Pilih gadget HTML/JavaScript
- Copy & Paste -kan tulisan berjalan pada bagian konten.
- Pastikan sobat melihat tulisan Rich Text
- Save