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 menawarkan tutorial menciptakan animasi proses scrollbar / page scroll indicator / progress kafetaria 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 :

• Membuat Menu Melayang (Sticky) Ketika di Scroll Pure Javascript

• Membuat Kotak Catatan / Blockquote Keren Di Blog

• Facebook Like Box Melayang Di Pojok Kanan Blog

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 kafetaria     var kafetaria = 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 isyarat </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 kesannya dengan menscroll halaman blog kalian..

Result

Cukup sekian dan terima kasih, biar artikel perihal Tutorial cara memasnag proggress scrollbar ini bermanfaat, jangan lupa commentsnya :)