Menambahkan Persentase pada Scrollbar

Gambar dibuat  menggunakan Photoshop

Menambahkan Persentase pada Scrollbar

Postingan ketiga hari ini mengenai cara menambahkan fungsi persentase pada scrollbar blog. Mungkin Sobat pernah melihat fungsi persentase ini di blog lain. Sebenarnya persentase scrollbar ini bukan fitur yang penting bagi sebuah blog. Namun tidak ada salahnya untuk mencoba, itupun tergantung selera masing-masing.

Dengan menambahkan persentase ini bukan hanya sebagai hiasan blog semata tetapi pengunjung akan bisa melihat berapa persen halaman yang telah Ia scroll, apabila telah sampai di bawah halaman maka nilai persentase akan menjadi 100%.



Untuk membuatnya silahkan ikuti langkah-langkah sederhana berikut ini :


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

#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 pemanggilnya di bawah </head>

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

3. Lalu, Simpan kode 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>

4. Kemudian simpan Template dan lihat hasilnya.


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

Nah, cukup mudah kan. Sekian untuk postingan kali ini dan terima kasih.