Membuat Progress Scrollbar Pure JavaScript di Blogger
![Membuat Progress Scrollbar Pure JavaScript di Blogger Progress Scrollbar Pure JavaScript](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXM4Ny3fGv7ZO1nwNTS6GpxPQL3IUpZegvhyphenhyphenDL-4mAtkOXq_tit2DbVBUI_qJraLceWBwevXKClbK8r_YZfguuK88EhKgCvwrW1fDqBWeZ05dDMiMae4URqYYtGvXUu9T8m0Unh3hA4Fr-/s600/Pure_Javascript_Progress_Scrollbar.png)
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 :)