haloo sahabat blogger, sudah lama nih saya gak ngeblog karena kesibukan sehari hari,hhehe. sebenarnya sih tutorial kali ini tidak terlalu penting namun dari pada blog ini gak ada postingan baru mending berbagi tutorial tentang Membuat Persentase pada Scrollbar

Dengan menambahkan persentase, pengunjung akan bisa melihat berapa persen halaman yang telah di scroll, apabila sampai bawah di scroll maka akan menjadi 100%.



Untuk membuatnya silahkan ikuti langkah-langkahnya :

1. Masuk ke Template dan Edit HTML. dan Simpan kode ini di atas ]]></b:skin>

#scroll {
  display: none;
  position: fixed;
  top: 0;
  right: 20px;
  z-index: 500;
  padding: 3px 8px;
  background-color: #2187e7;
  color: #fff;
  border-radius: 3px;
}
#scroll:after {
  content: " ";
  position: absolute;
  top: 50%;
  right: -8px;
  height: 0;
  width: 0;
  margin-top: -4px;
  border: 4px solid transparent;
  border-left-color: #2187e7;
}

2. Simpan kode ini di bawah </head>

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

3. Simpan JavaScript ini 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(100);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut();
    }, 1500);
});
//]]>
</script>

 Dan yang Terakhir Simpan Template

Mungkin hanya itu yang bisa saya bagikan kepada sobat, silahlan tanyakan bila ada yang kurang jelas di komentar,,,

Membuat Persentase pada Scrollbar by Bloggertut