Cara Membuat Scroll Bar Dengan Tampilan Persen Paling Keren

    Cara Membuat Scroll Bar Dengan Tampilan Persen Paling Keren - Scroll bar merupakan bagian yang paling sering terlihat oleh pengunjung blog, benar kan ? untuk sebagian blog, mereka memodifikasi blog nya dengan scroll bar berwarna, ada juga yang cukup unik, yaitu dengan membuat persentase di scroll bar blog, cukup unik bukan sobat ? tapi jelas keren donk ! Okay deh, langsung aja kita to the point.

WARNING !
Diharapkan untuk membuat back up dulu template anda, jadi sewaktu-waktu terjadi hal-hal yang tidak di inginkan anda sudah memiliki simpanan template.

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;
}

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>

 

Dan yang terakhir simpan template, dan lihat hasil nya . 

Keren bukan ?

NB : untuk mengganti warna background, cari background-color: #2187e7,lalu ganti warnanya, untuk mengatur jarak Scroolba Persentase dengan Scrollbar cari kode right: 20px; lalu ganti, untuk menggantinya kode 20px ganti menjadi 10px, 20px, dan selanjutnya, dan yang terakhir untuk mengubah warna teks cari kode color: #fff; dan ganti kode warna biru muda tersebut dengan kode warna yang kalian inginkan..

 

Sumber : NGOPREK ANDROID