Memasang Fungsi Presentase Scrollbar Di Blogger

Ketemu lagi dengan saya Mas Dar pada kesempatan kali saya akan share lagi tutorial kepada kamu semua yaitu Memasang Fungsi Presentase Scrollbar Di Blogger, emang peting dipasang seperti itu! 

Mungkin dari kamu ada pertanyaan seperti itu, ini sangat penting sekali dimana pengunjung bisa tau kalau berapa presentase Scrollbar saat membaca artikel pada blog milik kamu. 

Memasang presentase Scrollbar ini tidak hanya untuk hiasan semata akan tetapi pengunjung akan tau juga sudah berapa persen halaman yang sudah mereka baca. 

Untuk memasang nya pun sangat lah mudah kamu cukup ikuti aja tutorial yang ada di bawah ini ya gaes. 

Pertama, simpan 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;
}

Selanjutnya, simpan kode pemanggilnya di bawah  </head>

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

Simpan 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>

Kemudian simpan Template dan lihat hasilnya.

See the Pen Persentase Pada Scrollbar by Arlina Code (@arlinadesign) on CodePen.

Jika langkah-langkah yang anda lakukan tidak salah, maka blog anda seharusnya sudah ada persentase di samping scrollbar.

Cukup mudah bukan. Selamat mencoba.

Sumber

Share :