Cara Membuat Reading Progress Bar di Postingan Blogger

Sedang Trending 9 bulan yang lalu
Cara Membuat Reading Progress Bar di Postingan Blogger
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.

Cara Membuat Reading Progress Bar di Postingan Blogger

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(&quot;myBar&quot;).style.width = scrolled + &quot;%&quot;;}</script>

Cara Membuat Reading Progress Bar di Postingan Blogger

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}

Cara Membuat Reading Progress Bar di Postingan Blogger

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>

Cara Membuat Reading Progress Bar di Postingan Blogger

3. Simpan dan Perbarui Tema

Simpan perubahan tema Blogger dan refresh laman untuk memandang hasilnya.

Cara Membuat Reading Progress Bar di Postingan Blogger

Perhatikan perubahan pada progress bar saat menggulir laman postingan ke bawah.

Cara Membuat Reading Progress Bar di Postingan Blogger

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.

Selengkapnya
Sumber Info Blogging Malas Ngeblog
Info Blogging Malas Ngeblog