 |
| Cara Membuat Reading Progress Bar di Postingan Blogger |
Malasngeblog.com - Selamat datang di tutorial tentang cara membuat reading progress bar di postingan Blogger. Dalam artikel ini akan memandu pembaca melalui langkah-langkahnya dengan jelas dan mudah dipahami. Jadi, mari mulai dan tingkatkan pengalaman membaca pengunjung blog!
Apa itu Reading Progress Bar?
Reading Progress Bar adalah sebuah indikator visual yang menunjukkan sejauh mana pembaca telah membaca sebuah artikel atau postingan blog. Biasanya berupa bar horizontal yang muncul di bagian atas atau bawah halaman blog.
Kemajuan membaca ditampilkan dalam bentuk persentase atau panjang bar yang berubah seiring dengan pembacaan konten oleh pengguna.
Kegunaan Reading Progress Bar di Postingan Blog
Menarik Perhatian Pembaca
Reading Progress Bar memberikan kesan visual yang menarik dan mengundang minat pembaca. Ketika pengguna melihat adanya indikator kemajuan membaca, mereka dapat dengan jelas melihat seberapa banyak konten yang telah mereka baca dan berapa lagi yang harus mereka baca.
Hal ini dapat membantu mengurangi rasa kewalahan pembaca dan meningkatkan motivasi mereka untuk melanjutkan membaca artikel.
Mengoptimalkan Pengalaman Membaca
Dalam artikel yang panjang atau berisi banyak bagian, pembaca sering kali kehilangan jejak dan kesulitan memahami sejauh mana mereka sudah membaca. Reading Progress Bar membantu mengatasi masalah ini dengan memberikan panduan visual yang jelas.
Dengan mengetahui sejauh mana mereka telah membaca, pembaca dapat dengan mudah kembali ke titik terakhir yang mereka tinggalkan dan melanjutkan membaca dari sana.
Sebagai Alat Navigasi
Reading Progress Bar juga berfungsi sebagai alat navigasi yang berguna. Misalnya, jika pembaca ingin langsung menuju bagian tertentu dalam artikel, mereka dapat mengklik pada posisi yang diinginkan pada progress reading bar.
Hal ini memungkinkan pembaca untuk melompat ke bagian yang menarik minat mereka tanpa harus membaca keseluruhan artikel.
Baca juga tutorial cara memasang meta tags di Blogspot dengan mudah dan cara membuat menu dan sub menu dropdown di WordPress.
Cara Membuat Reading Progress Bar di Postingan Blogger
Simak selengkapnya tutorial di bawah ini agar kamu bisa memasang reading progress bar di setiap postigan Blogger:
1. Masuk ke Tema
Langkah pertama adalah buka dashboard Blogger kamu dan masuk ke Tema. Kemudian, pada tombol kustomisasi Tema, klik tanda panah ke bawah dan klik Edit HTML.
2. Edit Kode HTML Tema Blogger
Tekan Ctrl + F dan cari </body>. Copy dan paste kode di bawah ini di atas </body>
<script>window.onscroll = function() {myFunction()};dunction myFunction(){var winScroll = document.body.scrollTop || document.documentElement.scrollTop;var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;var scrolled = (winScroll / height) * 100;document.getElementById("myBar").style.width = scrolled + "%";}</script>
Setelah itu, copy kode di bawah ini dan paste di atas ]]></b:skin>.
.progress-container{width:100%;position:fixed;z-index:99}.progress-bar{height:5px;background:#F86152}
Sesuaikan kode #F86152 sesuai dengan kode warna yang kamu inginkan untuk diterapkan ke progress bar.
Lalu, paste kode di bawah ini setelah tag <body>
<div class='progress-container'><div class='progress-bar' id='myBar'/></div>
3. Simpan dan Perbarui Tema
Simpan perubahan tema Blogger dan refresh halaman untuk melihat hasilnya.
Perhatikan perubahan pada progress bar saat menggulir halaman postingan ke bawah.
Kamu dapat mengkustomisasi warna reading progress bar dengan mengubah kode Hex sesuai keinginan.
Reading Progress Bar adalah fitur yang bermanfaat dalam meningkatkan pengalaman pembaca di postingan blog. Dengan memberikan indikator visual tentang kemajuan membaca, fitur ini membantu menarik perhatian pembaca, dan memfasilitasi navigasi.
Dengan mengikuti langkah-langkah di atas, kamu telah berhasil menambahkan reading progress bar yang menarik pada postingan blog di Blogger.
Terima kasih telah menyimak tutorial seputar Blogger ini hingga rampung dan sampai jumpa di artikel lainnya. Selamat mencoba dan semoga berhasil.
