Cara Menambahkan Progress Scroll Bar Di Blogger

Apa itu Reading Progress Bar?

1. Pertama, login ke akun Blogger Anda
2. Pada Dashboard Blogger Pilih Menu Tata Letak
3. Dan di dalam bagian Tata Letak Tambahkan Gadget Pilih HTML/JavaScript
4. Setelah itu pada bagian Input Judul isi dengan nama Progress Bar
5. Kemudian pada bagian Input Konten, isi dengan script dibawah ini

<style>
.ZoneAmedia-progress-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);
} 
</style>
<div class="ZoneAmedia-progress-bar" id="scrollbar-ZoneAmedia"></div>
<script>
window.addEventListener("scroll",scrollZoneamedia);
function scrollZoneamedia(){
var winScroll=document.body.scrollTop||document.documentElement.scrollTop;
var height=document.documentElement.scrollHeight-document.documentElement.clientHeight;
var scrolled=(winScroll/height)*100;
document.getElementById("scrollbar-ZoneAmedia").style.width=scrolled+"%";
}
</script>

1. Pertama, login ke akun Blogger Anda
2. Pada Dashboar Blogger Pilih Menu Tema
3. Kemudian klik tab SESUAIKAN Pilih Edit HTML
4. Sekarang salin dan pastekan kode CSS berikut ini di atas kode ]]></b:skin>

.ZoneAmedia-progress-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);
}

<div class="ZoneAmedia-progress-bar" id="scrollbar-ZoneAmedia"></div>

<script>
window.addEventListener("scroll",scrollZoneamedia);
function scrollZoneamedia(){
var winScroll=document.body.scrollTop||document.documentElement.scrollTop;
var height=document.documentElement.scrollHeight-document.documentElement.clientHeight;
var scrolled=(winScroll/height)*100;
document.getElementById("scrollbar-ZoneAmedia").style.width=scrolled+"%";
}
</script>