Membuat Progress Scrollbar Pure Javascript Di Blogger

Progress Scrollbar Pure JavaScript

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 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 Membuat Animasi Progress Scrollbar Ketika Halaman di Scroll

  • Login ke akun blogger kalian
  • Masuk ke hidangan TemplateEdit 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 isyarat </head>, sesudah 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 jadinya dengan menscroll halaman blog kalian..

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


Sumber https://mastamvan.blogspot.com/

0 Response to "Membuat Progress Scrollbar Pure Javascript Di Blogger"

Post a Comment

Silahkan berkomentar.
Perhatian! Komentar yang mengandung spam tidak akan di terima.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel