Cara Menambahkan Progress Bar Membaca Di Blogger

pada tanggal

Apakah Anda ingin Menambahkan Bilah Kemajuan Membaca di Blogger? Ikuti langkah-langkah di bawah ini hati-hati untuk Menambahkan Reading Progress Bar di Blogger, dan buat blog blogger Anda terlihat luar biasa, pertama mari kita pahami Apa itu Reading Progress Bar dan Apa kebutuhan dari Reading Progress Bar? 


 

Apa itu Bilah Kemajuan Membaca?

Singkatnya, bilah kemajuan membaca adalah representasi visual dari seberapa banyak dari posting blog tetap. Ini mencapai ini dengan melacak posisi pengunjung di halaman. Saat mereka menggulir ke bawah, bilah mulai terisi, menunjukkan berapa banyak kemajuan yang telah mereka buat. Begitu mereka mencapai akhir pos, bilahnya adalah penuh.

Apa perlunya Reading Progress Bar?

Pengguna hanya membayar beberapa detik di halaman web sebelum memutuskan apakah akan tinggal atau pergi. Membuat pengguna tetap terlibat menjadi sedikit lebih menantang jika Anda menerbitkan artikel tipe panjang, karena mereka membutuhkan pengguna untuk menggulir ke bawah.

Beberapa pemilik rumah situs web menambahkan posting terhubung sebaris, yang lain menggunakan video atau galeri gambar untuk membuat pengguna tetap berada di halaman.

Bilah kemajuan membaca menambahkan peningkatan antarmuka pengguna sentuh yang mendorong pengguna untuk menggulir ke bawah. Ini juga memotivasi pengguna untuk menyelesaikan artikel mereka membaca.

Banyak situs web populer seperti Daily Beast, gunakan kemajuan membaca indikator untuk melibatkan pembaca mereka. Namun, Anda selanjutnya mungkin harus menyatakan bahwa indikator kemajuan membaca halus dan tidak merusak pengguna pengalaman di situs web Anda.

Karena itu, mari kita lihat bagaimana Anda dapat dengan mudah menambahkan bacaan bilah kemajuan di blogger.

Cara Menambahkan Progress Bar Membaca di Blogger?

Saya akan memandu Anda untuk Menambahkan Reading Progress Bar di Blogger, Oke, mari kita mulai!

Langkah 1. Pertama-tama, Anda harus pergi ke dasbor Blogger yaitu. blogger.com.

Langkah 2. Buka Bagian Tema dan Klik Tombol Edit HTML.

Langkah 3. Salin Kode CSS yang diberikan di bawah ini.

/* Bilah Bacaan Kemajuan */
 .progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;}
 .progress-bar{height:5px;background:#F86152;}

Langkah 4. Rekatkan Kode CSS di atas ]]>

tag.

Step 5. Copy the JS Code given below.

<script>
window.onscroll = function() {
    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("myBar").style.width = scrolled + "%";
}
</script>

Step 6. Paste Kode JS di atas

tag.

Langkah 7. Salin Kode HTML yang diberikan di bawah ini.

<div class='progress-container'>
<div class='progress-bar' id='myBar' style="width:0%;"></div>
</div>

Langkah 8. Rekatkan Kode HTML tepat di bawah tag.

Langkah 9. Klik Simpan!!

Kesimpulan

Nah teman-teman, bagaimana kalian menyukai postingan ini tentangCara Menambahkan Reading Progress Bar di Blogger?Sekarang kalian pasti sudah mengerti Cara Menambahkan Reading Progress Bar di Blogger.

Referensi: www.suyachan.my.id

Komentar

Posting Komentar