Cara Membuat Progress Bar Pada Template Blogspot

Pada kesempatan kali ini saya ingin share ke kalian semua tentang bagaimana cara membuat tampilan blog atau website ada semakin terlihat menarik, yakni sebuah  progress bar.

Selain bagusnya artikel yang diposting di blog penampilan website yang menarik juga tentu akan membuat pengunjung untuk berlama-lama untuk melihat blog yang kita punya.

Apa itu progress bar?

Progress bar merupakan sebuah line atau garis yang bergerak dari kiri kenan diatas halaman blog. Panjang pendeknya garis tersebut tergantung dengan seberapa panjang kita melakukan scrolling halaman tertentu di blog. Untuk lebih jelasnya sobat dapat melihat sendiri progress bar yang sudah terpasang pada blog ini. 

Cara Membuat Progress Bar Pada Template Blogspot

Untuk membuat progress bar pada template blogspot silahkan sobat ikuti langkah-langkahnya di bawah ini secara seksama agar tidak terjadi kesalahan pada saat pemasangannya.

1. Pertama-tama masuk ke halaman blogger kemudian pilih Theme. Dan pada bagian Customise pilih Edit Html
2. Cari kode ]]></b:skin> kemudian copas dan letakkan kode di bawah ini tepat di atas kode  ]]></b:skin>

/*PROGRESS SCROLLBAR*/ 

#top-scrollbar {
    position: fixed;
    top: 0;left: 0;
    width: 0%;
    height:1px;
    overflow: hidden;z-index: 99999;
}

#top-scrollbar-bg {
    width: 100%;height: 100%;
    position: absolute;
    background:linear-gradient(45deg, #EE9622, #FFB344);
}

Kode warna #EE9622 dan #FFB344 bisa sobat ganti warna yang diinginkan. Dan untuk mengubah ketebalan garis pada height silahkan ubah valuenya sesuai dengan yang diinginkan (Default value 1px).

3. Kemudian cari lagi kode </body> dan copy paste dan letakkan kode di bawah ini tepat di atas kode </body>

<script> 
    //<![CDATA[ 
    var bar_bg = document.getElementById("top-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("top-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>

4. Cari kode </head> kemudian copy paste dan letakkan kode di bawah ini tepat di bawah kode </head>

<div id='top-scrollbar'> 
    <div id='top-scrollbar-bg'> 
</div>

5. Dan yang terakhir klik simpan template dan silahkan refresh halaman blog untuk melihat hasilnya.

Selamat mencoba. Jika ada kendala dalam proses pemasangan progress bar pada blog sobat silahkan tanyakan pada kolom komentar.

Share :