Text berjalan atau yang sering disebut sebagai marquee text merupakan salah satu elemen sederhana yang masih sering digunakan pada website maupun blog. Meskipun terlihat klasik, text berjalan tetap memiliki fungsi yang cukup penting untuk menampilkan informasi yang ingin segera diperhatikan oleh pengunjung. Contohnya seperti pengumuman penting, promo terbaru, jadwal kegiatan, pemberitahuan update artikel, informasi maintenance, hingga pesan khusus bagi pembaca.
Bagi pengguna Blogger, membuat text berjalan bukanlah hal yang sulit. Bahkan tanpa menggunakan JavaScript sekalipun, Anda sudah dapat menampilkan tulisan yang bergerak secara otomatis. Selain itu, tersedia juga metode yang lebih modern menggunakan CSS Animation sehingga tampilannya menjadi lebih menarik dan fleksibel.
Pada artikel ini kita akan membahas secara lengkap cara membuat text berjalan di Blogger menggunakan HTML maupun CSS. Tidak hanya itu, Anda juga akan menemukan berbagai contoh efek gerakan yang bisa langsung digunakan pada blog.
Mengapa Text Berjalan Masih Digunakan?
Meskipun banyak elemen modern yang tersedia saat ini, text berjalan masih memiliki sejumlah manfaat yang membuatnya tetap digunakan oleh sebagian blogger. Salah satu alasannya adalah kemampuannya menarik perhatian pengunjung tanpa harus menggunakan gambar atau banner berukuran besar.
Beberapa fungsi text berjalan di Blogger antara lain:
- Menampilkan pengumuman penting.
- Menampilkan promo atau diskon.
- Menampilkan informasi artikel terbaru.
- Memberikan pemberitahuan maintenance website.
- Menampilkan jadwal kegiatan atau event.
- Menampilkan pesan sambutan kepada pengunjung.
Karena hanya berupa teks, ukuran kode yang digunakan juga sangat ringan sehingga tidak terlalu memengaruhi kecepatan loading blog.
Cara Membuat Text Berjalan Tanpa CSS
Metode pertama menggunakan tag HTML <marquee>. Cara ini merupakan metode paling mudah karena tidak memerlukan pengaturan tambahan.
Meskipun tag marquee sudah tidak direkomendasikan pada standar HTML modern, sebagian besar browser masih mendukungnya hingga saat ini.
Contoh Dasar Text Berjalan
<marquee>
Selamat datang di blog kami. Terima kasih telah berkunjung.
</marquee>Kode tersebut akan menghasilkan tulisan yang bergerak dari kanan ke kiri secara otomatis.
Mengatur Kecepatan Text Berjalan
<marquee scrollamount="10">
Informasi terbaru dapat Anda lihat pada artikel terbaru kami.
</marquee>Semakin besar nilai scrollamount, maka semakin cepat gerakan teks tersebut.
Mengatur Arah Gerakan
<marquee direction="right">
Text bergerak dari kiri ke kanan.
</marquee>Pada contoh di atas, atribut direction="right" digunakan untuk menentukan arah pergerakan teks. Secara default, tag <marquee> akan menggerakkan teks dari kanan ke kiri. Namun, dengan menambahkan atribut direction, kamu dapat mengubah arah animasi sesuai kebutuhan. Fitur ini sering digunakan untuk membuat pengumuman, informasi terbaru, atau pesan khusus yang lebih menarik perhatian pengunjung blog.
Selain nilai right, terdapat beberapa pilihan arah lain yang dapat digunakan. Setiap nilai menghasilkan efek pergerakan yang berbeda sehingga bisa disesuaikan dengan desain dan tujuan penggunaan pada halaman Blogger.
Pilihan arah yang tersedia:
-
left - Text bergerak dari kanan ke kiri.
<marquee direction="left"> 🚀 Selamat datang di Tips Tech Praktis </marquee> -
right - Text bergerak dari kiri ke kanan.
<marquee direction="right"> 👉 Tutorial Blogger terbaru setiap minggu </marquee> -
up - Text bergerak dari bawah ke atas.
<marquee direction="up"> 📢 Informasi terbaru blog </marquee> -
down - Text bergerak dari atas ke bawah.
<marquee direction="down"> ⭐ Promo dan pengumuman terbaru </marquee>
Text Berjalan Naik ke Atas
<marquee direction="up" height="60">
Baris Pertama<br>
Baris Kedua<br>
Baris Ketiga
</marquee>Text Berjalan Bolak-Balik
<marquee behavior="alternate">
Text bergerak bolak-balik.
</marquee>Efek ini membuat teks memantul ke kanan dan kiri secara otomatis.
Kelebihan dan Kekurangan Metode Marquee
Kelebihan
- Sangat mudah digunakan.
- Tidak memerlukan CSS tambahan.
- Cocok untuk pemula.
- Dapat langsung dipasang pada widget Blogger.
Kekurangan
- Sudah tidak termasuk standar HTML modern.
- Pengaturan desain terbatas.
- Kurang fleksibel dibanding CSS Animation.
Cara Membuat Text Berjalan Menggunakan CSS Animation
Jika Anda menginginkan tampilan yang lebih modern dan profesional, maka CSS Animation merupakan pilihan terbaik. Metode ini lebih fleksibel, ringan, dan sesuai dengan standar pengembangan website saat ini.
Berikut struktur dasar yang digunakan:
<style>
.marquee{
overflow:hidden;
white-space:nowrap;
}
.marquee span{
display:inline-block;
padding-left:100%;
animation:jalan 12s linear infinite;
}
@keyframes jalan{
0%{
transform:translateX(0);
}
100%{
transform:translateX(-100%);
}
}
</style>
<div class="marquee">
<span>Selamat datang di blog kami.</span>
</div>Metode ini menghasilkan gerakan yang lebih halus dibandingkan marquee biasa.
5 Gaya Gerakan Text Berjalan dengan CSS
Berikut beberapa variasi animasi yang dapat Anda gunakan untuk mempercantik tampilan blog.
1. Gerakan Klasik Kanan ke Kiri
@keyframes slideLeft{
0%{
transform:translateX(100%);
}
100%{
transform:translateX(-100%);
}
}Efek ini paling sering digunakan untuk pengumuman dan informasi terbaru.
2. Gerakan Kiri ke Kanan
@keyframes slideRight{
0%{
transform:translateX(-100%);
}
100%{
transform:translateX(100%);
}
}Cocok digunakan untuk variasi tampilan agar tidak monoton.
3. Gerakan Bolak-Balik
@keyframes bounceText{
0%{
transform:translateX(0);
}
100%{
transform:translateX(80%);
}
}Tambahkan properti berikut:
animation:bounceText 5s infinite alternate;Teks akan bergerak memantul dari kiri ke kanan secara terus-menerus.
4. Gerakan Vertikal dari Bawah ke Atas
Selain bergerak secara horizontal, teks juga dapat dibuat bergerak dari bawah ke atas. Efek ini sering digunakan untuk menampilkan daftar pengumuman, informasi terbaru, atau daftar update artikel.
@keyframes slideUp{
0%{
transform:translateY(100%);
}
100%{
transform:translateY(-100%);
}
}Contoh implementasi:
<style>
.marquee-up{
height:40px;
overflow:hidden;
position:relative;
}
.marquee-up span{
position:absolute;
width:100%;
animation:slideUp 8s linear infinite;
}
</style>
<div class="marquee-up">
<span>Update terbaru telah tersedia di blog ini.</span>
</div>Efek ini sangat cocok digunakan pada area sidebar Blogger karena tidak memerlukan ruang yang terlalu besar.
5. Gerakan Berjalan dengan Efek Zoom
Untuk memberikan kesan lebih modern, Anda dapat menggabungkan efek pergerakan dengan perubahan ukuran teks menggunakan CSS transform.
@keyframes zoomMove{
0%{
transform:translateX(100%) scale(0.8);
opacity:0.5;
}
50%{
opacity:1;
}
100%{
transform:translateX(-100%) scale(1.1);
opacity:0.8;
}
}Contoh penggunaan:
animation:zoomMove 12s linear infinite;Efek ini mampu memberikan tampilan yang lebih hidup dibandingkan animasi teks biasa.
Menggabungkan Efek Warna dan Text Berjalan
Agar text berjalan lebih menarik perhatian, Anda juga dapat menambahkan warna latar belakang dan warna teks yang kontras.
<style>
.info-marquee{
background:#f44336;
color:#fff;
padding:10px;
overflow:hidden;
white-space:nowrap;
border-radius:4px;
}
.info-marquee span{
display:inline-block;
padding-left:100%;
animation:jalan 12s linear infinite;
}
</style>
<div class="info-marquee">
<span>Promo terbaru tersedia hari ini.</span>
</div>Penggunaan warna yang tepat akan membuat informasi lebih mudah terlihat oleh pengunjung.
Membuat Sticky News Bar dengan Text Berjalan
Salah satu penggunaan text berjalan yang cukup populer adalah membuat sticky news bar atau bar informasi yang menempel di bagian atas website.
Contoh kode sederhana:
<style>
.sticky-news{
position:fixed;
top:0;
left:0;
width:100%;
background:#222;
color:#fff;
padding:10px 0;
z-index:9999;
overflow:hidden;
}
.sticky-news span{
display:inline-block;
padding-left:100%;
animation:jalan 15s linear infinite;
}
</style>
<div class="sticky-news">
<span>Selamat datang di blog kami. Jangan lewatkan artikel terbaru yang telah dipublikasikan hari ini.</span>
</div>Dengan menambahkan posisi fixed, bar informasi akan tetap terlihat meskipun pengunjung menggulir halaman ke bawah.
Cara Memasang Text Berjalan di Blogger
Setelah memahami berbagai jenis animasi yang tersedia, langkah berikutnya adalah memasangnya ke Blogger. Ada beberapa lokasi yang dapat digunakan sesuai kebutuhan.
1. Memasang pada Gadget HTML/Javascript
Metode ini paling sering digunakan karena mudah diterapkan dan tidak memerlukan perubahan template.
- Masuk ke Dashboard Blogger.
- Pilih menu Tata Letak.
- Klik Tambahkan Gadget.
- Pilih HTML/Javascript.
- Tempelkan kode text berjalan.
- Simpan gadget.
- Klik Simpan Tata Letak.
Setelah disimpan, text berjalan akan langsung muncul pada posisi gadget yang dipilih.
2. Memasang pada Postingan
Jika hanya ingin menampilkan text berjalan pada artikel tertentu, Anda dapat menempatkan kode langsung di dalam editor HTML postingan.
- Buat postingan baru.
- Pindah ke mode Tampilan HTML.
- Tempelkan kode marquee atau CSS Animation.
- Publikasikan artikel.
Metode ini cocok untuk pengumuman yang hanya relevan pada artikel tertentu.
3. Memasang Langsung pada Template
Untuk penggunaan secara global pada seluruh halaman blog, kode dapat ditempatkan langsung di dalam template Blogger.
- Buka menu Tema.
- Klik Edit HTML.
- Tambahkan kode CSS sebelum tag </head>.
- Tambahkan struktur HTML pada lokasi yang diinginkan.
- Simpan template.
Metode ini memungkinkan text berjalan tampil pada semua halaman website secara otomatis.
Tips Menggunakan Text Berjalan Agar Tidak Mengganggu Pengunjung
Walaupun text berjalan dapat menarik perhatian, penggunaannya tetap harus dilakukan secara bijak. Terlalu banyak animasi justru dapat mengurangi kenyamanan pengunjung saat membaca artikel.
Beberapa tips yang dapat diterapkan antara lain:
- Gunakan hanya untuk informasi penting.
- Hindari kecepatan animasi yang terlalu tinggi.
- Gunakan warna yang nyaman dilihat.
- Jangan menempatkan terlalu banyak marquee dalam satu halaman.
- Pastikan tetap responsif di perangkat mobile.
- Sesuaikan ukuran teks dengan desain blog.
Sebelum mengikuti tutorial, ada baiknya melihat terlebih dahulu contoh hasil text berjalan yang sudah diterapkan. Demo berikut menampilkan beberapa variasi animasi yang dapat digunakan pada Blogger, baik menggunakan tag HTML sederhana maupun CSS Animation yang lebih modern.
Dengan menerapkan tips tersebut, text berjalan dapat menjadi elemen yang bermanfaat tanpa mengurangi pengalaman pengguna.
Mana yang Lebih Baik, Marquee atau CSS Animation?
Pertanyaan ini sering muncul di kalangan pengguna Blogger. Jawabannya tergantung kebutuhan masing-masing.
Jika Anda menginginkan cara tercepat dan paling sederhana, maka tag marquee masih dapat digunakan. Namun jika ingin tampilan yang lebih modern, fleksibel, dan sesuai standar web saat ini, maka CSS Animation adalah pilihan yang lebih direkomendasikan.
CSS Animation memberikan kebebasan penuh dalam mengatur kecepatan, arah gerakan, warna, ukuran, efek tambahan, hingga responsivitas pada berbagai ukuran layar. Karena alasan tersebut, sebagian besar pengembang website saat ini lebih memilih menggunakan CSS dibandingkan tag marquee tradisional.
Kesimpulan
Membuat text berjalan di Blogger sebenarnya sangat mudah. Anda dapat menggunakan tag marquee untuk solusi yang cepat dan sederhana, atau memanfaatkan CSS Animation untuk mendapatkan tampilan yang lebih profesional dan modern.
Pada tutorial ini Anda telah mempelajari cara membuat text berjalan tanpa CSS, cara menggunakan CSS Animation, serta lima variasi efek gerakan yang dapat langsung diterapkan pada blog. Selain itu, Anda juga telah mengetahui cara memasang kode tersebut pada widget, postingan, maupun template Blogger.
Dengan penggunaan yang tepat, text berjalan dapat membantu menyampaikan informasi penting kepada pengunjung sekaligus meningkatkan daya tarik visual blog tanpa membebani kecepatan loading halaman.
Pertanyaan yang Sering Diajukan (FAQ)
Apakah text berjalan masih bisa digunakan di Blogger?
Ya, text berjalan masih dapat digunakan di Blogger. Anda bisa menggunakan tag marquee maupun CSS Animation. Namun untuk tampilan yang lebih modern dan fleksibel, CSS Animation lebih direkomendasikan.
Apakah text berjalan mempengaruhi kecepatan loading blog?
Secara umum tidak. Kode text berjalan hanya menggunakan HTML dan CSS sederhana sehingga ukurannya sangat ringan. Selama tidak digunakan secara berlebihan, fitur ini tidak akan memberikan dampak signifikan pada performa blog.
Mana yang lebih baik, marquee atau CSS Animation?
Jika mengutamakan kemudahan, marquee bisa menjadi pilihan. Namun jika ingin tampilan yang lebih modern, responsif, dan sesuai standar web saat ini, CSS Animation merupakan solusi yang lebih direkomendasikan.
Bagaimana cara memasang text berjalan di Blogger?
Anda dapat memasang text berjalan melalui widget HTML/Javascript, langsung di dalam postingan, halaman statis, maupun pada template Blogger agar tampil di seluruh halaman blog.
Apakah text berjalan bisa digunakan di perangkat mobile?
Ya, baik marquee maupun CSS Animation dapat berjalan dengan baik di perangkat mobile. Pastikan ukuran teks dan area tampilannya tetap nyaman dibaca pada layar yang lebih kecil.
Bagaimana cara mengatur kecepatan text berjalan?
Pada marquee Anda dapat menggunakan atribut scrollamount untuk mengatur kecepatan. Sedangkan pada CSS Animation, kecepatan dapat diubah melalui nilai durasi pada properti animation.
