Cara Menambahkan Persentase Pada Scrollbar Blog

Halo Sobat! Kembali Lagi Denga Saya.Kali ini saya akan memberikan tutorial menambahkan persentase pada scrollbar blog.Mungkin fungsi ini tidak terlalu penting di dalam blog.Namun jika anda menginginkan tampilan tambahan anda dapat memasangnya di blog anda.Langsung saja yuk!

Menambahkan Persentase Pada Scrollbar

1.Buka Blogger > Template > Edit HTML > Taruh kode di bawah tepat di atas ]]></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;
}

2. Selanjutnya, taruh kode pemanggilnya di bawah  </head>

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

3. Taruh 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>

4. simpan Template dan lihat hasilnya.

Jika Anda Berhati-hati dan tidak ada kesalahan seharusnya persentase pada scrollbar telah muncul.
Bagaima?Mudah Bukan? Jika ada kesulitan bisa ditanyakan melalui kotak komentar dibawah