Memasang Persentase Pada Scrollbar

Postingan ini mengenai cara memasang fungsi persentase pada scrollbar blog.

Mungkin anda pernah melihat fungsi persentase di blog lain.

Sebenarnya persentase scrollbar ini bukan fitur yang penting bagi sebuah blog.

Namun tidak ada salahnya dicoba untuk mempercantik tampilan blog anda, tapi itu pun tergantung selera masing-masing individu.

Dengan menambahkan persentase ini bukan hanya sebagai hiasan blog semata tetapi pengunjung akan bisa melihat beberapa persen halaman yang telah Ia scroll.

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

Pertama, simpan kode di bawah tepat di atas tag ]]></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 pemanggilannya di bawah tag </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 hasilnnya.