11 bulan yang lalu
 |
| Cara Membuat Reading Progress Bar di Postingan Blogger |
Malasngeblog.com - Selamat datang di tutorial tentang langkah membikin reading progress bar di postingan Blogger. Dalam tulisan ini bakal memandu pembaca melalui langkah-langkahnya dengan jelas dan mudah dipahami. Jadi, mari mulai dan tingkatkan pengalaman membaca visitor blog!
Apa itu Reading Progress Bar?
Reading Progress Bar adalah sebuah parameter visual nan menunjukkan sejauh mana pembaca telah membaca sebuah tulisan alias postingan blog. Biasanya berupa bar mendatar nan muncul di bagian atas alias bawah laman blog.
Kemajuan membaca ditampilkan dalam corak persentase alias panjang bar nan berubah seiring dengan pembacaan konten oleh pengguna.
Kegunaan Reading Progress Bar di Postingan Blog
Menarik Perhatian Pembaca
Reading Progress Bar memberikan kesan visual nan menarik dan mengundang minat pembaca. Ketika pengguna memandang adanya parameter kemajuan membaca, mereka dapat dengan jelas memandang seberapa banyak konten nan telah mereka baca dan berapa lagi nan kudu mereka baca.
Hal ini dapat membantu mengurangi rasa kewalahan pembaca dan meningkatkan motivasi mereka untuk melanjutkan membaca artikel.
Mengoptimalkan Pengalaman Membaca
Dalam tulisan nan panjang alias 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 pedoman visual nan jelas.
Dengan mengetahui sejauh mana mereka telah membaca, pembaca dapat dengan mudah kembali ke titik terakhir nan mereka tinggalkan dan melanjutkan membaca dari sana.
Sebagai Alat Navigasi
Reading Progress Bar juga berfaedah sebagai perangkat navigasi nan berguna. Misalnya, jika pembaca mau langsung menuju bagian tertentu dalam artikel, mereka dapat mengklik pada posisi nan diinginkan pada progress reading bar.
Hal ini memungkinkan pembaca untuk melompat ke bagian nan menarik minat mereka tanpa kudu membaca keseluruhan artikel.
Baca juga tutorial cara memasang meta tags di Blogspot dengan mudah dan cara membikin menu dan sub menu dropdown di WordPress.
Cara Membuat Reading Progress Bar di Postingan Blogger
Simak selengkapnya tutorial di bawah ini agar Anda bisa memasang reading progress bar di setiap postigan Blogger:
1. Masuk ke Tema
Langkah pertama adalah buka dashboard Blogger Anda 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 nan Anda 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 laman untuk memandang hasilnya.
Perhatikan perubahan pada progress bar saat menggulir laman postingan ke bawah.
Kamu dapat mengkustomisasi warna reading progress bar dengan mengubah kode Hex sesuai keinginan.
Reading Progress Bar adalah fitur nan berfaedah dalam meningkatkan pengalaman pembaca di postingan blog. Dengan memberikan parameter visual tentang kemajuan membaca, fitur ini membantu menarik perhatian pembaca, dan memfasilitasi navigasi.
Dengan mengikuti langkah-langkah di atas, Anda telah sukses menambahkan reading progress bar nan menarik pada postingan blog di Blogger.
Terima kasih telah menyimak tutorial seputar Blogger ini hingga rampung dan sampai bertemu di tulisan lainnya. Selamat mencoba dan semoga berhasil.
English (US) · 
Indonesian (ID) ·