CARA MEMBUAT PERSENTASE PADA SCOLLBAR

Hai sobat, ane hadir lagi di dalam kehidupan sobat. Sebenernya tutorial ini kurang penting, tapi kalo sobat mau buat persentase pada blog sobat juga gak apa-apa. Fungsi tutorial kali ini menurut ane cuma buat hiasan, buat mempercantik blog gitu. Ok langsung aja simak tutorialnya........

1. Buka blogger.com
2. Langsung ke Template > Edit HTML
3. Copy kode di bawah dan taruh di atas ]]></b:skin> 

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

4. Kalo udah copy kode di bawah dan taruh di bawah </head>

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

5. Selanjutnya copy jQuery di bawah dan taruh 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>

6. Kemudian simpan template

sumber: http://arlinadesign.blogspot.com/2014/10/memasang-persentase-pada-scrollbar.html

Subscribe to receive free email updates: