logo blog

Membuat Progress Scrollbar Pure JavaScript di Blogger

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 Membuat Animasi Progress Scrollbar Ketika Halaman di Scroll

  • Login ke akun blogger kalian
  • Masuk ke menu TemplateEdit 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 :)

Share this:

Berlangganan via email

Agan Sedang Membaca Artikel : Membuat Progress Scrollbar Pure JavaScript di Blogger. Silahkan masukan email anda dibawah ini! dan nanti akan otomatis mendapatkan kiriman artikel terbaru dari Blog Mas Tamvan. Terimakasih.

Kumpulan Tips Trik Blogger

Blog Mas Tamvan

Terima Kasih Sudah Membaca Artikel Tentang : Membuat Progress Scrollbar Pure JavaScript di Blogger. Jika Ada Yang Mau Request Tutorial Silahkan Beri Tahu Saya Di Kolom Komentar :)

Saya menunggu komentar anda..

Kalo ada yang error mohon kasih tau admin, supaya bisa secepatnya untuk diperbaiki..

Komentar dengan link promo akan masuk spam.

Tambahkan Spasi Setelah Memasukan Kode Emoticon..
Gunakan kode <i rel="image">URL GAMBAR DI SINI</i> untuk menyertakan gambar di komentar.Show Konversi Kode Hide Konversi Kode Show EmoticonShow Emoticon Hide Emoticon