Membuat Progress Scrollbar Pure Javascript Di Blogger
Membuat Progress Scrollbar Ketika Halaman di Scroll Pure JavaScript
Memasang Progress Scrollbar Menggunakan JavaScript, pada tutorial kali ini saya akan memperlihatkan tutorial menciptakan animasi proses scrollbar / page scroll indicator / progress kafe di atas halaman blog
Page Scroll Progress Indicator ini akan menampilkan garis horizontal diatas / dapat 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 sajian Template → Edit HTML, Cari Kode </body>
- Setelah ketemu, masukan Javascript Progress Scrollbar dibawah ini sempurna diatasnya
<script type="text/javascript"> //<![CDATA[ // | 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 kafe var kafe = 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 arahan </head>, sehabis ketemu masukan css dibawah ini sempurna 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 akhirnya dengan menscroll halaman blog kalian..
Cukup sekian dan terima kasih, biar artikel perihal Tutorial cara memasnag proggress scrollbar ini bermanfaat, jangan lupa commentsnya :)