Cara Membuat Teks Berjalan Marquee di Blog
Pernah tidak sobat melihat tulisan / teks yang berjalan di suatu blog? saya rasa pasti sudah pernah, itu bernama marquee! fungsinya sebenarnya hanyalah sebagai hiasan di blog, hampir sama dengan headline news cuma yang ini lebih mudah mengaturnya, terutama dalam mengatur gerakan / prilaku teks yang di inginkan. Sobat yang tertarik membuat tulisan yang mondar - mandir ini, silahkan ikuti terus tutorialnya.
Apa Itu Marquee?
Marquee adalah sebuah elemen HTML yang digunakan untuk membuat teks atau gambar bergerak secara horizontal atau vertikal di dalam halaman web. Dalam HTML, tag <marquee> digunakan untuk menampilkan elemen-elemen tersebut. Marquee dapat digunakan untuk memberikan efek animasi sederhana pada halaman web.
Cara Membuat Tulisan Berjalan Marquee di Blog
1. Buka Dashboard Blogger
2. Pilih menu Halaman > Buat Halaman
3. Ubah tampilan ke Mode HTML
4. Salin Code berikut HTML berikut:
Ada banyak jenis Marquee dan kamu bisa pilih salah satunya yang cocok.
Tulisan bergerak dari kanan ke kiri
<marquee direction="left" scrollamount="2" align="center">Contoh Tulisan Berjalan</marquee>
Hasilnya
Tulisan bergerak dari kiri ke kanan
<marquee direction="right" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>
Hasilnya
Teks bergerak bolak balik ( mondar - mandir ) dari kiri ke kanan
<marquee direction="left" scrollamount="2" align="center" behavior="alternate"> Contoh Tulisan Berjalan </marquee>
Hasilnya
Teks bergerak bolak balik ( mondar - mandir ) dari kanan ke kiri
<marquee direction="right" scrollamount="2" align="center" behavior="alternate"> Contoh Tulisan Berjalan </marquee>
Hasilnya
Teks bergerak dari atas ke bawah
<marquee direction="down" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>
Hasilnya
Teks bergerak dari bawah ke atas
<marquee direction="up" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>
Hasilnya
Catatan:
• 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>
Hasilnya
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="codepelajar.com"/>kunjungi codepelajar selalu</a></marquee> </div>
Ganti Url dengan yang di inginkan.
Hasilnya
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="https://www.codepelajar.com/2023/11/membuat-qr-code-generator-menggunakan.html?m=1">Qr code generator</a><br/> <a href="https://www.codepelajar.com/2023/11/cara-memasang-widget-cek-resi-dan-cek.html?m=1">Widget Cek Resi</a><br/> <a href="https://www.codepelajar.com/2023/11/cara-mengambil-gambar-thumbnail-video.html?m=1">Mengambil thumbnail youtube</a><br/> </marquee>
Kode onmouseover="this.stop()" onmouseout="this.start()" adalah perintah pada teks untuk terhenti ketika di lewati pointer.
Hasilnya
Marquee ini juga dapat kamu pasang di Wordpress dan website lainnya dengan cara beserta kode yang sama.
Penutup
Terimakasih sudah mengunjungi blog codepelajar semoga dengan ini bisa mempercantik blog kamu dan meningkatkan jumlah pengunjung.