Ilustrasi: Contoh ticker berita berjalan di atas blogspot
Cara Pasang Ticker Berita Jalan di Blogspot + Kode Gratis 2026
Punya blog di blogspot tapi berasa gitu-gitu aja? Coba pasang ticker berita. Ticker adalah teks berjalan di bagian atas blog yang isinya bisa pengumuman, link artikel terbaru, atau info penting. Fungsinya bukan cuma biar keren, tapi juga bisa ningkatin CTR dan bikin pengunjung betah. Di artikel ini aku bakal kasih tutorial lengkap + kode gratis cara pasang ticker berita jalan di blogspot. Dijamin responsif di HP dan gak bikin blog lemot.
Kenapa Harus Pakai Ticker di Blog?
Banyak blogger besar pakai ticker karena 3 alasan ini:
- Ningkatin Pageview: Isi ticker bisa kamu isi link ke artikel terbaru. Jadi pengunjung langsung klik.
- Buat Pengumuman Penting: Lagi ada giveaway? Ada artikel baru? Taro di ticker biar semua orang lihat.
- Kesan Profesional: Blog jadi kelihatan seperti portal berita. Lebih dipercaya pengunjung.
Bahan-bahan yang Perlu Disiapkan
Tenang, 100% gratis. Cuma butuh 2 hal:
- Akses ke Dashboard Blogspot
- Kode HTML + CSS + JS di bawah ini
Langkah-langkah Pasang Ticker di Blogspot
Langkah 1: Masuk ke Tema
Login ke Blogger > Pilih blog `cuplisotw` > Menu Tema > Klik Edit HTML
Langkah 2: Paste Kode Ini di Bawah <body>
Cari kode <body> lalu paste kode di bawahnya. Ini udah versi paling ringan dan anti patah.
<!-- KODE TICKER BERITA BLOGSPOT -->
<style>
.ticker-wrap {width: 100%; background: #111; color: #fff; padding: 10px 0; overflow: hidden; font-family: 'Segoe UI', sans-serif;}
.ticker-title {background: #d93025; padding: 10px 15px; font-weight: bold; float: left;}
.ticker {display: inline-block; white-space: nowrap; padding-left: 100%; animation: ticker 25s linear infinite;}
.ticker:hover {animation-play-state: paused;}
.ticker a {color: #fff; text-decoration: none; margin: 0 30px;}
.ticker a:hover {color: #fbbc04;}
@keyframes ticker {0% {transform: translateX(0);} 100% {transform: translateX(-100%);}}
@media(max-width: 768px){.ticker-title{font-size:14px;padding:8px 10px;}}
</style>
<div class="ticker-wrap">
<div class="ticker-title">BERITA TERBARU</div>
<div class="ticker">
<a href="https://cuplisotw.blogspot.com/2026/01/artikel-1.html">🔥 Cara Download Video YouTube Tanpa Aplikasi</a>
<a href="https://cuplisotw.blogspot.com/2026/02/artikel-2.html">💰 Harga Emas Hari Ini Naik Lagi</a>
<a href="https://cuplisotw.blogspot.com/2026/03/artikel-3.html">📱 10 HP 1 Jutaan Terbaik 2026</a>
<a href="https://cuplisotw.blogspot.com/2026/04/artikel-4.html">🎁 Link Twibbon 17 Agustus 2026</a>
</div>
</div>
<!-- AKHIR KODE TICKER -->
Ilustrasi: Paste kode ticker di bawah tag body pada edit HTML
Langkah 3: Ganti Link dan Teks
Bagian yg harus kamu ganti ada di tag <a href="">Judul</a>. Ganti link dan judulnya dengan artikel di blog kamu sendiri. Mau nambah? Tinggal copy paste 1 baris <a> lagi.
Tips Kecepatan: Angka `25s` di `animation: ticker 25s` itu kecepatan. Mau lebih cepet ganti jadi `15s`. Mau lebih lambat ganti jadi `40s`.
Langkah 4: Simpan dan Cek
Klik Simpan Tema. Buka blog kamu di HP dan PC. Ticker harusnya udah jalan otomatis dari kanan ke kiri. Kalau di hover mouse, dia akan berhenti.
Tips Biar Ticker Gak Ganggu SEO
Banyak yg salah pasang ticker malah bikin blog berat. Hindari ini:
- Jangan Terlalu Banyak Link: Maksimal 5-7 link. Kebanyakan malah dianggap spam sama Google.
- Gunakan Link Internal: Isi ticker dengan link artikel di blog kamu sendiri. Jangan link keluar terus.
- Update Rutin: Ganti isi ticker tiap seminggu sekali biar Google tau blog kamu aktif.
Kode ini sudah diuji di template Blogspot default dan SEO Friendly. Tidak menggunakan jQuery jadi load nya ringan. Kalau blog kamu error setelah pasang, cek apakah ada tag `</div>` yg kurang.
Kesimpulan
Pasang ticker berita di blogspot itu gampang banget dan gratis. Cuma butuh 5 menit. Efeknya lumayan buat ningkatin jumlah klik ke artikel lama dan bikin blog kelihatan lebih hidup.
sumber: abmgarage.com