Cara Membuat Scrolling Progress Bar di Blogger

Cara Membuat Scrolling Progress Loading Bar di Blogger - Kali ini galih ingin membagikan tips baru untuk mempercantik tampilan blog. Mungkin kamu sudah melihat di beberapa situs yang memakai animasi scrolling bar di bagian atas halaman sebuah situs yang bisa berkurang atau bertambah jika kamu melakukan scroll ke atas atau kebawah. Animasi tersebut dinamakan Scrolling Progress bar.

Cara Membuat Scrolling Progress Bar

Ada beberapa tahapan untuk membuat Scroll bar. Yakni penambahan tag html, css dan juga sedikit Javascript yang saya yakin tidak akan membuat loading halaman situsmu menjadi berat, tidak akan.

1. Silahkan tambahkan kode css berikut ini pada bagian head. Jika kamu menggunakan Blogger, silahkan masuk ke Tema > Edit HTML > Cari tag </head> tambahkan kode berikut ini tepat diatasnya.

<style type="text/css">
/*Progress*/
progress {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 2px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    background-color: transparent;
    color: #eefba3;
    z-index: 9999;
}

progress::-webkit-progress-bar {
 background-color: transparent;
 z-index: 10;
}

progress::-webkit-progress-value {
 background-color: #eefba3;
 z-index: 10;
}

progress::-moz-progress-bar {
 background-color: #eefba3;
 z-index: 10;
}

.progress-container {
 width: 100%;
 background-color: transparent;
 position: fixed;
 top: 0;
 left: 0;
 height: 5px;
 display: block;
 z-index: 10;
}

.progress-bar {
 background-color: #eefba3;
 width: 0%;
 display: block;
 height: inherit;
 z-index: 10;
}
</style>

Ubahlah warna background Progress Bar sesuai yang kamu inginkan jika dirasa perlu.

2. Tambahkan kode berikut ini pada bagian awal body. Jika kamu menggunakan Blogger, silahkan masuk ke Tema > Edit HTML > Cari tag <body> lalu tambahkan kode berikut ini tepat dibawahnya.

<progress max='1' value='0'>
<div class='progress-container'>
<span class='progress-bar'></span>
</div>
</progress>

3. Tambahkan JQuery versi berapa saja. Jika kamu menggunakan Blogger, silahkan masuk ke menu Tema > Edit HTML > Cari tag </head> lalu letakkan kode berikut ini tepat diatasnya.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>

Agar JQuery yang kamu gunakan menjadi ringan dan tidak membuat loading blog berat, silahkan baca artikel galih yang berjudul Cara meringankan Jquery di Blogger.

4. Tambahkan kode berikut ini pada bagian Body. Jika kamu menggunakan Blogger, silahkan masuk ke menu Tema > Edit HTML > Cari tag </body> lalu letakkan kode berikut ini tepat diatasnya.

<script type='text/javascript'>
//<![CDATA[
//Progress Bar
$(document).ready(function() {

 var getMax = function() {
  return $(document).height() - $(window).height();
 }

 var getValue = function() {
  return $(window).scrollTop();
 }

 if ('max' in document.createElement('progress')) {
  var progressBar = $('progress');
  
  progressBar.attr({
   max: getMax()
  });

  $(document).on('scroll', function() {
   progressBar.attr({
    value: getValue()
   });
  });

  $(window).resize(function() {
   
   progressBar.attr({
    max: getMax(),
    value: getValue()
   });
  });

 } else {

  var progressBar = $('.progress-bar'),
   max = getMax(),
   value, width;

  var getWidth = function() {
   
   value = getValue();
   width = (value / max) * 100;
   width = width + '%';
   return width;
  }

  var setWidth = function() {
   progressBar.css({
    width: getWidth()
   });
  }

  $(document).on('scroll', setWidth);
  $(window).on('resize', function() {
   
   max = getMax();
   setWidth();
  });
 }
});
//]]>
</script>

5. SIMPAN

Itu saja tutorial dari galih berjudul Cara membuat scrolling progress bar di Blogger. Silahkan share jika bermanfaat dan Subscribe jika kamu ingin mengetahui artikel terbaru galih.

Cara Membuat Scrolling Progress Bar di Blogger

Cara Membuat Scrolling Progress Bar

Related Posts

Tags: Blogger, CSS, HTML, JavaScript