Cara Menambahkan Fitur Progress Bar di Blogger
1. Masuk ke blog yang ingin kamu tambahkan fitur progress bar nya
2. Masuk ke bagian Tema dan pilih Edit HTML
3. Cari codingan </style> dan tempelkan codingan css berikut diatas nya
.freeze-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);
}
4. Salin codingan dibawah ini dan tempelkan dibawah tag <body>
<div class="freeze-progress-bar" id="scrollbar-freeze"></div>
5. Setelah itu, tempelkan codingan javascript ini tepat diatas code </body>
<script>
window.addEventListener("scroll",scrollFreeze);
function scrollFreeze(){
var winScroll=document.body.scrollTop||document.documentElement.scrollTop;
var height=document.documentElement.scrollHeight-document.documentElement.clientHeight;
var scrolled=(winScroll/height)*100;
document.getElementById("scrollbar-freeze").style.width=scrolled+"%";
}
</script>
Kamu bisa mengubah nama class css nya sesuai dengan keinginan mu.
6. Jika sudah, jangan lupa untuk menyimpan tema agar progress bar nya bisa berjalan