Panduan Lengkap Cara Memasang Widget Teks Berjalan di Blog (Marquee)

  

Meningkatkan Estetika Blog dengan Widget Teks Berjalan

Sebagai seorang pengelola blog, Anda pasti ingin membuat tampilan situs terlihat lebih dinamis dan menarik perhatian pengunjung. Salah satu elemen klasik yang sering digunakan untuk memberikan kesan interaktif adalah widget teks berjalan atau yang dikenal dengan istilah marquee.

Meskipun terlihat sederhana, penggunaan teks berjalan dapat menjadi aksen visual yang efektif jika ditempatkan dengan tepat, misalnya di bagian footer untuk informasi hak cipta atau di bagian sidebar untuk pengumuman penting. Dalam panduan ini, saya akan membagikan cara teknis untuk memasangnya langsung di platform Blogger.

Mengapa Menggunakan Widget Teks Berjalan?

Secara teknis, elemen ini memang berfungsi sebagai hiasan (dekorasi). Namun, dari sisi pengalaman pengguna (UX), teks berjalan bisa membantu menyoroti informasi yang ingin Anda sampaikan secara cepat tanpa memakan banyak ruang layar. Penting untuk diingat agar tidak berlebihan dalam menggunakannya, karena fokus utama blog tetaplah pada konten yang informatif dan mudah dibaca.

Langkah-Langkah Memasang Widget Teks di Blogger

Proses pemasangannya sangat mudah dan tidak memerlukan keahlian pemrograman tingkat tinggi. Ikuti langkah-langkah berikut:

1. Login ke dashboard Blogger Anda.
2. Buka menu Tata Letak (Layout).
3. Klik Tambah Gadget pada area yang diinginkan (sidebar atau footer).
4. Pilih jenis gadget HTML/JavaScript.
5. Salin dan tempel (copy-paste) kode yang Anda pilih di bawah ini, lalu klik Simpan.

Variasi Kode Widget Teks Berjalan

Anda bisa menyesuaikan arah dan perilaku teks dengan mengganti parameter pada kode HTML berikut:

1. Teks Bergerak Dasar

Gunakan kode ini untuk pergerakan sederhana:

• Kanan ke Kiri: <marquee direction="left">Teks Anda</marquee>
• Kiri ke Kanan: <marquee direction="right">Teks Anda</marquee>
• Atas ke Bawah: <marquee direction="down">Teks Anda</marquee>

2. Teks dengan Gaya Kustom (Background & Border)

Untuk membuat tampilan lebih profesional, Anda bisa menambahkan CSS inline:

<div style="background: #000000; color: white; padding: 10px; border: 2px solid #FF0000;">
<marquee direction="left" scrollamount="5">Teks Berjalan Anda di Sini</marquee>
</div>

3. Fitur Interaktif: Berhenti Saat Kursor Menyentuh (Hover)

Ini sangat berguna jika Anda ingin menampilkan daftar tautan atau pengumuman panjang:

<marquee onmouseover="this.stop()" onmouseout="this.start()" direction="up" height="100">
  Tautan 1<br/>
  Tautan 2<br/>
  Tautan 3
</marquee>

Tips Optimasi Kode Marquee

Agar widget Anda berfungsi dengan optimal, perhatikan parameter berikut:

• Scrollamount: Mengatur kecepatan pergerakan teks. Semakin besar angkanya, semakin cepat teks bergerak.
• Behavior: Gunakan alternate jika Anda ingin teks memantul di ujung layar.
• Direction: Tentukan arah gerakan (left, right, up, down).

Kesimpulan

Memasang widget teks berjalan adalah cara cepat untuk memberikan sentuhan personal pada blog Anda. Dengan mengikuti langkah-langkah di atas, Anda bisa dengan mudah mengintegrasikan fitur ini tanpa merusak struktur blog. Pastikan untuk selalu melakukan pengecekan di tampilan mobile agar teks berjalan tersebut tidak mengganggu kenyamanan pembaca saat mengakses situs Anda melalui ponsel.

Selamat mencoba dan semoga blog Anda semakin menarik bagi para pengunjung!

Berbagi :