Cara Membuat Persentase Scroll Pada Blog

Membuat Persentase pada Scrollbar -MR-Kurosaki sebelumnya saya sempat posting template ni.. yg saya beri judul Blue Template Responsive  dan kali ini saya akan share tentang cara Membuat Persentase Scroll Pada Blog Tutorial kali ini sebenarnya tidak terlalu penting bagi sebuah blog, namun bagi sahabat yang ingin membuat blognya lebih unik, tidak ada salahnya untuk mencoba menerapkan persentase pada scrollbar ini.

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

DEMO

Untuk membuatnya silahkan ikuti langkah-langkahnya :

Langkah 1 : Seperti biasa masuk ke Template dan Edit HTML. 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;
}

*kode yg berwarna merah itu adalah kode warna scrollnya.. jdi bisa kalian gnti dgn warna yg kalian suka. untuk cek kodewarnanya klikdisini

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

<div id=scroll></div> 

Langkah 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> 

langkah 4 : save dan enjoy.. :D

nah gimana sob.. bisa kan?? tutorial ini sangat mudah kok.. dan gampang dipahami..sekarang blog anda jdi lebih keren dah,, dengan persentasenya.. :D
sekian postingan kali ini yg berjudul Cara Membuat Persentase Scroll Pada Blog semoga bermanfaat,,, jgn lupa komentarnya.