Cara Memasang Persentase Pada Scrollbar di Blog

Pada artikel kali ini Sudar Code akan share tutorial cara memasang presentase scrollbar di blogger, jika kamu pernah melihat pada blog lain saat berkunjung disana. 

Walaupun sebenarnya fitur ini tidaklah begitu penting akan tetapi tidak ada salahnya apabila dipasang pada sebuah blog. Namun tidak ada salahnya untuk dipasang pada blog kita jika ingin memasangnya

Langsung aja apabila kamu ingin mencoba simak tutorial berikut ini. 

Cara penerapannya pun cukup mudah, silahkan ikuti langkah-langkah sederhana berikut ini :


Pertama, simpan kode di bawah tepat di atas ]]></b:skin> atau </style>

#scroll {
  display:none;
  position:fixed;
  top:0;
  right:15px;
  z-index:500;
  padding:3px 8px;
  background-color:#369fcf;
  color:#fff;
  border-radius:3px;
  font-size:14px;  
}
#scroll:after {
  content: " ";
  position: absolute;
  top:50%;
  right:-10px;
  height:0;
  width:0;
  margin-top:-6px;
  border:6px solid transparent;
  border-left-color:#369fcf;
}

Selanjutnya, simpan kode pemanggilnya di bawah  </head>

<div id='scroll'></div>

Simpan kode di bawah ini tepat di atas  </body>

<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(600);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut(600);
    }, 1000);
});
//]]>
</script>

Kemudian simpan Template dan lihat hasilnya.

See the Pen Persentase Pada Scrollbar by Arlina Code (@arlinadesign) on CodePen.

Jika langkah-langkah yang anda lakukan tidak salah, maka blog anda seharusnya sudah ada persentase di samping scrollbar.

Cukup mudah bukan. Selamat mencoba.

Berbagi :