Reading Progress Bar

Reading progress bar adalah sebuah indikator animasi garis berwarna bergerak dari kanan ke kiri yang digunakan untuk mengetahui sejauh mana pengunjung situs Anda membaca sebuah artikel di blog atau website Anda. Dan letak posisi reading progress bar ini berada di atas header menu blog. Serta widget reading progress bar kali ini tidak akan mempengaruhi loading website , karena script nya tidak berat.

Tutorial

Bagaimana cara membuat reading progress bar? Cara membuat reading progess bar di blog di Template Plus UI atau di Template Blogger lainnya., ikuti langkah-langkahnya berikut di bawah ini.

Kode Script Progess Bar

Pertama masuk ke Dashboard Blogger.
Pilih Tema.
Pilih Edit HTML.
Langkah #1 - cari kode ]]></b:skin> , kemudian salin script berikut di bawah ini dan tempelkan di atas kode ]]></b:skin>.

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

Langkah #2 - salin kode script di bawah ini, dan letakkan di bawah kode <body>

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

Langkah #3 - Terakhir salin kode script di bawah ini, dan kemudian tempelkan di atas kode </body>

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