 |
| Cara Membuat Progress Bar Reading Blog di Template Plus UI |
Reading Progress Bar
Digunakan untuk mempermudah pembaca blog , salah satunya dengan menggunakan Fitur Progress scroll bar atau Reading progress bar pada blog kita.
Script ini tidak akan mempengaruhi loading website , karena script nya tidak berat. Dan letak posisi reading progress bar ini berada di atas header menu blog.
Tutorial
Cara membuat reading progess bar di template Plus UI, sebagai berikut.
Tahap I
Salin kode script di bawah, 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);
}
Tahap II
Salin kode script di bawah ini, dan letakkan di bawah kode <body>
<div class="NPrinsh-progress-bar" id="scrollbar-NPrinsh"></div>
Tahap III
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>
Kemudian Simpan.
Demikian semoga bermanfaat.
Demo