Cara Membuat Persentase Pada Scrollbar Di Blog Cara Membuat Persentase Pada Scrollbar Di Blog

Bagaimana nih kabarnya semua? Sehat selalu kan? Semoga saja kalian tetap diberika kesehatan agar bisa mengunjungi dan membaca di ANK’s Blog. Nah pada kesempatan kali ini, saya akan menshare tutorial untuk blog kalian. Tutorialnya adalah membuat persentase di blog. Fungsi adalah untuk mengetahui sebesar kita men-scroll di blog. Jika masih 0% berarti masih di atas, sedangkan jika sudah 100% berarti kalian berada di paling bawa blog. Selain itu, fungsi lainnya adalah untuk mempercantik blog. Jika blog kalian enak untuk dipandang, otomatis para pengunjung akan betah berada di blog kalian. Dan tidak menutup kemungkinan mereka akan mengunjungi blog kalian dilain waktu. Oke, langsung saja ikuti tutorialnya dibawah ini, dan langsung saja kalian praktekkan di blog kalian masing-masing.

1. Masuk ke Template --> Edit HTML.

2. Copy kode dibawah ini, diatas kode ]]></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;
}

3. Copy kode dibawah ini, dibawah kode </head>

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

4. Copy kode dibawah ini, di atas kode </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> 

5. Save, dan lihat di blog kalian masing-masing.

Ikuti ANK’s Blog di twitter dan bergabunglah bersama kami di facebook untuk mendapatkan update informasi tentang  games, music, film, software, dll.