Membuat Progress Scrollbar Pure JavaScript di Blogger

Progress Scrollbar Pure JavaScript

Membuat Progress Scrollbar Ketika Halaman di Scroll Pure JavaScript

Memasang Progress Scrollbar Menggunakan JavaScript, pada tutorial kali ini saya akan memberikan tutorial membuat animasi proses scrollbar / page scroll indicator / progress bar di atas halaman blog

Page Scroll Progress Indicator ini akan menampilkan garis horizontal diatas / bisa juga memindahkannya jadi dibawah halaman blog kalian, tergantung kalian sukanya d sebelah mana. Untuk memasangnya cukup mudah, kalian tinggal ikuti langkah demi langkah pada tutorial di bawah ini dan jangan lupa mampir ke tutorial lainnya

Tutorial Blogger Lainnya :

Tutorial Membuat Animasi Progress Scrollbar Ketika Halaman di Scroll

  • Login ke akun blogger kalian
  • Masuk ke menu Template → Edit HTML, Cari Kode </body>
  • Setelah ketemu, masukan Javascript Progress Scrollbar dibawah ini tepat diatasnya
    • 
<script type="text/javascript">
//<![CDATA[
//Mas Tamvan | Progress Scrollbar
var bar_bg = document.getElementById("scrollbar-bg"),
    body = document.body,
    html = document.documentElement;

bar_bg.style.minWidth = document.width + "px";

document.getElementsByTagName("body")[0].onresize = function() {
    // Update the gradient width
    bar_bg.style.minWidth = document.width + "px";
}

window.onscroll = function() {
    // Change the width of the progress bar
    var bar = document.getElementById("scrollbar"),
        dw  = document.documentElement.clientWidth,
        dh  = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight ),
        wh  = window.innerHeight,
        pos = pageYOffset || (document.documentElement.clientHeight ?
                              document.documentElement.scrollTop : document.body.scrollTop),
        bw  = ((pos / (dh - wh)) * 100);

    bar.style.width = bw + "%";
}
//]]>
</script>
  • Langkah selanjutnya, cari kode </head>, setelah ketemu masukan css dibawah ini tepat diatasnya
    • 
<style type='text/css'>
#scrollbar {
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 0%;
    height: 4px;
    z-index: 9999;
}

#scrollbar-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:#F62869;
}
</style>
  • Sekarang save template dan lihat hasilnya dengan menscroll halaman blog kalian..

Cukup sekian dan terima kasih, semoga artikel tentang Tutorial cara memasnag proggress scrollbar ini bermanfaat, jangan lupa commentsnya :)

Tinggalkan Komentar