Tutorial Membuat Animasi Progress Scrollbar Saat Halaman di Scroll

Scrollbar atau "bilah gulir" merupakan elemen antarmuka yang memungkinkan pengguna untuk menjelajahi halaman konten yang panjang, seperti dokumen atau halaman website / blog. Secara umum, scrollbar ini berfungsi sebagai navigasi untuk menunjukkan arah dan batasan pengguna saat mengakses sebuah konten atau halaman blog dari atas ke bawah begitu pula sebaliknya atau baik kiri ke kanan begitu pula sebaliknya.

Bolehkah fitur ini diterapkan di blog dengan platform blogspot? Tentu saja bisa sobat blogger. Page Scroll Progress Indicator dapat kita terapkan di blogspot dengan sangat mudah. Posisinya juga dapat kita sesuaikan dengan keinginan kita, ingin tampilan garis horizontalnya diatas halaman blog atau bisa juga memindahkannya jadi dibawah halaman blog tergantung selera masing-masing.

Bagi yang masih bingung bagaimana tampilan scrollbar saat diterapkan di blog, silakan klik tombol demo berikut.




Selain berfungsi sebagai navigasi, scrollbar dapat mempercantik tampilan blog dari sisi desain blog. Yuk kita coba praktekkan !!

Cara Membuat Animasi Progress Scrollbar di Blog

1. Login ke akun blogger;
2. Masuk ke menu Template, buka Edit HTML;
3. Cari Kode </body>;
4. Paste Javascript Progress Scrollbar dibawah ini tepat diatasnya:
   
   

   <script type="text/javascript">
   //<![CDATA[
   //Blog Anak Bangsa | 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>
       

   
   
5. Langkah selanjutnya, cari kode </head>;
6. Paste 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>
   

   
   
7. Simpan template, dan lihat hasilnya dengan menggerakkan tampilan blog kalian ke atas atau ke bawah.

Sangat mudah bukan? Tampilan blog terlihat lebih menarik dan lebih elegan. Semoga tutorial singkat ini bermanfaat.