Apa Itu Reading Progress Bar?
Reading Progress Bar itu fitur kecil yang nunjukin seberapa jauh kamu udah baca artikel di blog. Jadi, pas kamu scroll ke bawah, bar ini bakal ikut jalan dan ngasih tahu kamu udah sampai mana. Begitu sampe akhir artikel, bar ini bakal penuh.
Kalau sering baca artikel panjang, pasti pernah ngalamin bingung udah baca sampai mana, kan? Nah, progress bar ini solusinya! Selain itu, fitur ini juga bikin tampilan blog lebih profesional dan bikin pembaca lebih betah.
Kenapa Reading Progress Bar Penting?
Kenapa sih harus ribet-ribet nambahin Reading Progress Bar? Nih, beberapa alasannya:
1. Bikin Pembaca Betah
Dengan adanya progress bar, pembaca bisa tahu mereka udah baca seberapa banyak. Ini bikin mereka lebih nyaman dan nggak gampang bosan. Jadi, kalau misalnya mereka tinggal bentar buat ngopi atau ngurus yang lain, pas balik mereka bisa lanjut baca dengan lebih gampang.
2. Meningkatkan Interaksi
Kalau pembaca tahu mereka udah baca setengah, pasti lebih semangat buat lanjut sampe habis. Jadi, lebih kecil kemungkinan mereka ninggalin artikel di tengah jalan. Ini juga bagus buat meningkatkan waktu kunjungan di blog kamu.
3. Ngurangin Bounce Rate
Bounce rate itu persentase orang yang langsung cabut setelah buka halaman blog. Nah, progress bar bisa bikin mereka betah lebih lama karena mereka penasaran mau baca sampai akhir. Semakin lama mereka di blog kamu, makin bagus juga buat SEO!
4. Bikin Blog Makin Keren
Selain fungsional, progress bar ini juga bisa bikin tampilan blog lebih kece dan kelihatan lebih profesional. Apalagi kalau dipadukan dengan desain yang clean dan modern.
Cara Nambahin Reading Progress Bar di Blogger
Oke, sekarang kita langsung aja ke tutorialnya! Ikuti langkah-langkah di bawah ini, gampang kok!
Langkah 1: Login ke Akun Blogger
Buka Blogger.com dan login ke akun kamu. Pilih blog yang mau ditambahin fitur ini.
Langkah 2: Masuk ke Menu Tema dan Edit HTML
- Di dashboard Blogger, klik menu Tema.
- Klik tanda panah kecil di tombol "Sesuaikan".
- Pilih Edit HTML.
Langkah 3: Tambahin Kode CSS
Salin kode ini dan tempelin di atas kode ]]></b:skin> dalam file HTML blog kamu.
/* Progress Bar */
.Atprogress-bar{
background:linear-gradient(90deg,#ff0005 10%,#d81fef 90%);
opacity:.95;
position:fixed;
top:0;
left:0;
height:3px;
z-index:999;
transition:all .4s cubic-bezier(.47,1.64,.41,.8)
}
Kode ini bakal bikin progress bar dengan warna gradasi merah ke ungu dan posisinya bakal tetap di atas halaman.
Kalau mau warna lain, kamu bisa ganti kode warna di bagian background:linear-gradient(...). Misalnya, buat warna biru ke hijau, kamu bisa ganti jadi:
background:linear-gradient(90deg,#00b4db 10%,#0083b0 90%);
Langkah 4: Tambahin Kode HTML & JavaScript
Copy kode ini dan tempelin di atas kode </body> dalam file HTML blog kamu.
<div class="Atprogress-bar" id="Atprogressbar"></div>
<script>
//<![CDATA[
/*
* Progress Bar
*/
window.addEventListener("scroll", myFunction);
function myFunction(){
var winScroll=document.body.scrollTop||document.documentElement.scrollTop;
var height=document.documentElement.scrollHeight-document.documentElement.clientHeight;
var scrolled=(winScroll/height)*100;
document.getElementById("Atprogressbar").style.width=scrolled+"%";
}
//]]>
</script>
Kode ini yang bikin progress bar bisa jalan sesuai dengan scroll pembaca.
Langkah 5: Simpan Perubahan
Udah selesai? Jangan lupa klik Simpan Tema biar perubahan bisa langsung diterapkan ke blog kamu!
Kalau progress bar nggak muncul, coba refresh halaman blog kamu atau bersihkan cache browser.
Tips Tambahan
- Sesuaikan warna Kalau mau bikin progress bar yang sesuai dengan tema blog kamu, coba ubah warna gradasinya di kode CSS.
- Ubah ketebalan bar
Kalau mau progress bar yang lebih tebal atau lebih tipis, ubah angka di
height: 3px;pada kode CSS. - Tambahkan efek animasi
Supaya lebih menarik, bisa ditambah efek animasi dengan
transition: all 0.5s ease-in-out;.
Kesimpulan
Reading Progress Bar ini fitur yang sederhana tapi efeknya besar. Bisa bikin pembaca lebih nyaman, blog jadi lebih interaktif, dan pastinya tampilan blog makin kece.
Selain itu, progress bar juga bisa bantu ningkatin SEO dengan bikin orang lebih lama di blog kamu. Jadi, nggak ada ruginya buat nambahin fitur ini!
Ikutin langkah-langkah di atas, nggak perlu jago coding kok buat nambahin ini ke Blogger. Selamat mencoba, semoga blog kamu makin keren! 🚀
Kalau ada pertanyaan atau masalah, jangan ragu buat komen atau tanya ya! 😉
Sampai ketemu di artikel selanjutnya!