-picsay.png "Cara Menambahkan Fitur Progress Bar di Blogger")
Hai semuanya, kali ini saya akan memberikan Tutorial Cara Menambahkan Fitur Progress Bar di Blogger. Apa itu Progress Bar ? Progress Bar merupakan sebuah animasi yang berjalan diatas postingan. Untuk contohnya bisa kamu lihat pada blog ini. Ketika kamu membaca artikel semakin ke bawah, maka progress bar yang berada diatas artikel semakin ke kanan. Bagaimana cara membuat nya ? Simak tutorialnya dibawah ini.
1. Masuk ke blog yang ingin kamu tambahkan fitur progress bar nya
2. Masuk ke bagian Tema dan pilih Edit HTML
.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 kode dibawah ini dan tempelkan dibawah tag <body>
<div class="freeze-progress-bar" id="scrollbar-freeze"></div>
5. Setelah itu, tempel 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 nya agar progress bar nya bisa berjalan.
Sekian tutorial kali ini tentang Cara Menambahkan Fitur Progress Bar di Blogger. Jika masih belum paham ataupun memiki kendala tentang tutorial diatas, silahkan bertanya di kolom komentar. Sekian dan Terimakasih.