Cara Mudah Membuat Gambar Tulisan Berjalan di Blog
Nikekuko.com - Supaya mendapakan karya yang baik kita sebagai penulis perlu berkreasi pada tulisan di blog kita untuk memberikan kesan yang indah dan menarik bagi para pembaca/pengujug blog kita nantinya.
Diantaranya, kita dapat memberi sedikit sentuhan seni animasi yaitu membuat tulisan/teks yang terlihat berjalan.
Biasanya saat kita meonton Tv Sering kan lihat tulisan/teks berjalan di layar televisi, di pinggir jalan terpasang papan tempat periklanan (Billboard),di counter-conter biasanya banyak terpasang dengan berbagai macam gerakan.
Sedangkan dalam dunia Web-pro, tulisan/teks berjalan atau running text lebih dikenal dengan nama “Marquee”
Pengertian Marquee adalah salah satu kode bahasa program HTML (HyperText Markup Language), untuk membuat efek tulisan/gambar menjadi berjalan atau bergerak.
Cara membuat tulisan berjalan (marquee) di website/blog, bukanlah hal yang sulit, sebenarnya sangat muah kalau sudah tahu caranya.
Untuk ini kita akan mencoba membuat beberapa jenis marquee yang bisa sobat pilih untuk di terapkan dalam blog. Namun terlebih dulu kita belajar membuat Script -nya dan lihat contohnya.
Mari kita sama-sama belajar membuat tulisan bejalan di website/blog, dengan Script HTML marquee.
1. Tulisan Berjalan dari kanan ke kiri, atau dari kiri ke kanan
<marquee direction="left" scrollamount="10"> Tulisan berjalan ke kiri </marquee><br />
<marquee direction="right" scrollamount="10"> Tulisan bejalan ke kanan </marquee>
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>
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>
4. Tulisan berjalan memantul (bolak balik )
Script :
<marquee behavior="alternate" scrollamount="10"> Tulisan berjalan memantul </marquee>
Contoh :
5. Tulisan berjalan Zig-zag
Script :
<marquee behavior ="alternate" direction = "up" height="60px" scrollamount="6"> <br />
<marquee direction="right" scrollamount="6"> Tulisan berjalan zig-zag </marquee> </marquee>
Contoh:
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>
Contoh :
7. Tulisan berjalan dengan atribut "behavior" Script :
<marquee behavior="scroll" scrollamount="10" width="400">Tulisan berjalan (scroll) </marquee><br /><marquee behavior="slide" scrollamount="10" width="400"> Tulisan berjalan (slide) </marquee><br /> <marquee behavior="alternate" scrollamount="10" width="400"> Tulisan berjalan (alternate) </marquee>
Contoh:
8. Tulisan berjalan dengan kecepatan Script :
Contoh:<marquee width="350"> Tulisan berjalan dengan kecepatan </marquee><br /<marquee scrollamount="5" width="350"> Tulisan berjalan dengan kecepatan </marquee><br /><<marquee scrollamount="25" width="350"> Tulisan berjalan dengan kecepatan </marquee> Contoh
Tulisan berjalan dengan kecepatan
9. Tulisan berjalan dengan atribut "vspace" Script :
<marquee bgcolor="red" scrollamount="10" vspace="15" width="400" > Tulisan berjalan (vspace) </marquee><br /><marquee bgcolor="yellow" scrollamount="10" vspace="15" width="400"> Tulisan berjalan (vspace) </marquee><br /><marquee bgcolor="green" scrollamount="10" vspace="15" width="400"> Tulisan berjalan (vspace) </marquee>
Contoh:
10. Tulisan berjalan dengan "hspace" Script :
<marquee bgcolor="red" hight="100" width="400"> Tulisan berjalan (hspace) </marquee> <br /> <marquee bgcolor="yellow" hight="100" hspace="8" width="400"> Tulisan berjalan (hspace) </marquee><br /> <marquee bgcolor="green" hight="100" hspace="20" width="400"> Tulisan berjalan (hspace) </marquee>
Contoh:
11. Tulisan berjalan dengan Background Script :
<marquee bgcolor="FFF300" align ="center" direction ="left" scrollamount="10"> Tulisan berjalan dengan background </marquee>
Contoh:
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://nilibass.blogspot.com/2020/10/cara-membuat-tulisan-berjalan-dan.html"> Cara membuat tulisan Berjalan</a><br /> <a href="https://nilibass.blogspot.com/2020/10/cara-membuat-tulisan-berjalan-dan.html"> Cara membuat tulisan Berjalan </a><br /> <a href="https://nilibass.blogspot.com/2020/10/cara-membuat-tulisan-berjalan-dan.html"> Cara membuat tulisan Berjalan </a><br /> </marquee>
Contoh:
13. Tulisan berjalan dengan atribut "Loop" Catatan: Tulisan ini berjalan hanya 5x puteran. Habis itu, tulisan berhenti. Untuk melihat gerakan, silahkan di-refresh kembali. Script :
<marquee loop="5" width="450"> Tulisan berjalan dengan loop </marquee> <br /> <marquee behavior ="slide" loop="5" width="450"> Tulisan berjalan dengan loop </marquee>
Contoh:
14. Gambar berjalan dengan tag Marquee Script :
<marquee><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfp2WfCKbYnBvutaK9IvQwlQW-8jP5GZBxhUiFOdTfPkTdCe5VuM9mQvYU7iJvKFAuGlRl78hw21pgwnUkHLsusNbuxTvc6-Juzs6tHv7_lpEFVx03PNQdJCh_XPO9yfOAtszD3TElDwQ/s150/animasi-bergerak-berlari-0071.gif" /></marquee>
Contoh:
15. Kombinasi Atribut Marquee Kombinasi marquee
Dapat dilakukan dengan menggabungkan beberapa atribut sekaligus. Sobat sudah mengetahui dasar-dasar membuat marquee, silahkan mengkreasikan marquee sobat sendiri.Selamat mencoba semoga bermanfaat.
16. Animasi-bergerak-bendera-indonesia-0010
<a href="https://www.gambaranimasi.org/cat-bendera-indonesia-781.htm"><img src="https://www.gambaranimasi.org/data/media/781/animasi-bergerak-bendera-indonesia-0010.gif" border="0" alt="animasi-bergerak-bendera-indonesia-0010" /></a>