Cara Membuat Progress Scroll di Blog / WordPress

Konten [Tampil]

Cara buat progress scrollbar di blog akan mempercantik tampilan dari blog anda ya, progress scrollbar adalah fitur yang dipergunakan untuk memberitahu sampai dimana artikel yang anda baca selesai, jadi nantinya hal ini akan membuat animati scrollbar yang seolah-olah sampai titik akhir bacaan ya.

Rafinternet akan memberikan cara membuat progress scrollbar di blog atau wordpress mampu membuat pengunjung anda suka terhadap tampilan blog anda ya, akan tetapi hal ini ada resikonya yaitu membuat loading blog semakin berat saja ya.

Nah kali ini akan membahas Cara Membuat Progress ScrollBar di Blogger / WordPress. Buat anda yang ingin membuat pengunjung anda betah maka anda dapat menggunakan langkah-langkah dibawah ini.

Daftar Isi

1. Cara Memasang Progress Scroll Bar di BlogSpot

Cara Memasang Progress Scroll Bar di BlogSpot

Cara membuat progress scrollbar di blog dimulai dengan login ke akun blogger anda ya, lalu pilih Tema > Edit HTML.

Setelah itu anda cari ]b:skin ya pada script blog anda ya. Kemudian anda dapat menambahkan kode dibawah ini ya

/* Progress ScrollBar Gradient Color */

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

#top-scrollbar-bg {width: 100%;height: 100%;position: absolute;background:linear-gradient(45deg, #26A65B, #22A7F0);}

Dilanjutkan dengan memasukan javascript diatas 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>

Demikianlah cara membuat progress scroll bar di blog, semoga anda paham ya kawan-kawan.

Share this post