Mudahnya Membuat Tulisan Berjalan (Maquee)
Apa kabar sobat semua,.. dalam artikel ini kita akan membahas tentang cara cara membuat tulisan berjalan (marquee) untuk mempercantik Blog/Website agar terkesan tidak polos.
Sering kita jumpai tulisan tulisan berjalan di layar televisi, tempat pengiklanan, atau di pinggir jalan biasanya rame tuh banget tuh dengan berbagai macam gerakan, nah di dunia Web tulisan /teks berjalan atau running text lebih dikenal dengan nama "Marquee".
Apa itu Marquee .... ?
Marquee adalah salah satu kode bahasa program HTML untuk membuat efek tulisan/gambar menjadi berjalan atau gerak.
Bagaimana cara membuat tulisan berjalan (marquee) di blog/websiter ..... ?
Cara membuat tulisan berjalan (marquee) di blog/website, bukanlah perkara yang sulit. Gampang sebenarnya kalau sudah tau caranya dan memahami kode HTML, Tapi nggk seru kalau belum di coba?? asyik semangat langsung cusss....
Kita bahas dari mulai mendasar dulu ya,.. Perhatikan !!!
Kode dasar taq Marque :
<marquee> TULISAN BERJALAN </marquee>
Secara default, teks akan berjalan dari kanan ke kiri dan berulang terus - menerus.
Tapi karena kurang seru ya kan... , kalau gerkan itu - itu saja. Jangan kecewa kawan, karena taq marquee memiliki beberapa attribut yang bisa kita kombinasikan untuk beberapa variasi gerakan tulisan sesuak hati.
Berikut beberapa kode 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 pojo, jadi jangan harap tulisan bisa datang berjalan sendiri dari pojokan dan langsung masuk ke Hatimu..... heheh hee Busyett..... :)
Okey,... kita langsung saja meluncur ke tahap selanjutnya...
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 di balik yah kawan.
Preview :
3. Tulisan berjalan memusat atau berlawanan arah (kekiri-kekanan)
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 Brow)
Script :
<marquee behavior="alternate" scrollamount="10"> Tulisan berjalan memantul </marquee>
Preview :
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 :
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 :
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 :
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 :
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 :
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 :
11. Tulisan berjalan dengan Background
Script :
<marquee align ="center" direction ="left" scrollamount="10"> Tulisan berjalan dengan background </marquee>
Preview :
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>
Preview :
13. Tulisan berjalan dengan atribut "Loop"
*Tulisan ini hanya berjalan 5x putaran, 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 :
14. Gambar berjalan dengan tag Marquee
Script :
<marquee direction="right" scrollamount="10"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXx8n-NKyT4-kzxN0JKHl6MIxYZKjzFLkJOdDvkqJ0v3fTpgA3cUlADq34-wJtF8Xalw1opLcnkQ6iRdh1WletB8BXqZlgAqgpzHG0h_FPblGJyyHnXRS2RCQTbwsMeNwPRg2t4RcoJUsq/s1600/Gambar-berjalan%25283%2529.gif" /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXx8n-NKyT4-kzxN0JKHl6MIxYZKjzFLkJOdDvkqJ0v3fTpgA3cUlADq34-wJtF8Xalw1opLcnkQ6iRdh1WletB8BXqZlgAqgpzHG0h_FPblGJyyHnXRS2RCQTbwsMeNwPRg2t4RcoJUsq/s1600/Gambar-berjalan%25283%2529.gif" /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrZwKHRGC1em4D-l-87kEOU-kcstEOmRg6uC93TSK3vn0AfPI6aEOJdqhHXnsMw9YIN8cGZstpmcBU2mtdXFg8Jiw9eyF2hsQ5IxDUEMp3DDCSrbQ-nNiJPr_x9o1pRcRWgutHOSsqJOyP/s1600/Gambar-berjalan.jpg" /> </marquee>
Preview :
Cukup sekian dari kami kawan,.. Sobat tinggal mainkan aje atribut marquee di atas,. misal menggabungkan beberapa script HTML. Sebagai catatan : silahkan ganti "value" sesuai keinginan sobat
Contoh :
Post a Comment