Cara Memasang Persentase Pada Scrollbar

Baca Juga

Cara Memasang Persentase Pada Scrollbar – setiap blogger sudah lumrah memiliki yang namanya Scrollbar di dalam templatenya. Scrollbar berfungsi untuk memudahkan pengunjung mengetahui letak posisi ketika ia membaca atau membuka sebuah Artikel di Website atau Blog. kali ini saya akan bagikan tutorial yang berkaitan dengan Scrollbar yaitu bagaimana caranya agar memunculkan Presentase pada Scrollbar, sehingga akan lebih menarik dan lebih pasti mengetahui seberapa persen lokasi pengunjung berada dari atas sampai bawah halaman. Apabila telah sampai pada akhir halaman maka presentase Scrollbar akan menunjukkan nilai 100%. Baiklah langsung saja kita cari tahu cara membuatnya berikut ini.

Baca juga : Cara Membuat Widget Label Warna Dengan Angka  di Blog

1. Buka Blog sobat > Pergi kemenu Template > Edit HTML > lalu simpan kode berikut ini tepat di atas kode ]]></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. Kemudian simpan kode Pemanggil di bawah ini tepat di bawah kode </head>

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

3. lalu simpan kode di bawah ini tepat 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(600);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut(600);
    }, 1000);
});
//]]>
</script>

4. Terakhir simpan Template dan Lihat hasilnya

Baca juga : Cara Terbaru Daftar Google Adsense Dari Blog

Demikianlah tutorial Mengenai Cara Memasang Persentase Pada Scrollbar, yang harus sobat ketahui. Semoga dapat memberikan ilmu yang bermanfaat dunia akhirat.