Cara Membuat Persentase Pada Scroolbar

Baiklah kali ini saya akan berbagi Tuorial yang mungkin menurut anda tidak penting untuk blog anda namun apasalahnya untuk dicoba terlebih dahulu.

Dengan menambahkan persentase pada Scrollbar ini berarti anda telah membantu pengunjung untuk mengetahui sudah berapa persen halaman yang telah di scroll, dan apabila di scroll sampai bawah maka akan menjadi 100%.

Silahkan ikuti langkah-langkah berikut ini.

Langkah 1 : Masuk ke Template dan Edit HTML. Letakkan kode berikut ini diatas ]]></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;
}

Langkah 2 : Simpan kode di ini bawah </head>

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

Langkah 3 : Simpan Javascript ini diatas </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>

Simpan Template.

Selamat. Anda telah berhasil menambahkan persentase di sampping scrollbar. Jika ada masalah silahkan tinggalkan komentar Anda.

Sumber : BloggerTuts