Cara Gampang Membuat Presentase Pada Scrollbar Di Blogger

Demo    Juni 02, 2020    Blogger , CSS , JS    Comment   

Lapakinfo.net - Halo teman - teman lapak info, pada kesempatan kali ini saya selaku admin lapakinfo.net akan berbagi tutorial tentang Cara Gampang Membuat Presentase Pada Scrollbar Di Blogger yang keren. Presentase scrollbar ialah merupakan fitur yang sangat menarik yang bisa menghitung berapa persen di saat kalian melakukan scroll ke bawah atau ke atas di blog kalian. Dengan membuat presentase scrollbar pada blog kalian sudah tentu membuat blog kalian menjadi lebih lengkap.

Sebelum langsung ke tutorial saya akan jelaskan sedikit dari kegunaan presentasi scrollbar, kegunaan dari presentasi scrollbar ialah untuk mengetahui atau membantu pengunjung sejauh mana mereka pada artikel yang sedang di baca, pengunjung akan mengetahuinya dari persen pada scrollbar tersebut. Untuk membuat atau memasangnya pun sangat gampang sekali, kalian bisa ikuti beberapa langkahnya si bawah ini.

Cara Gampang Membuat Presentase Pada Scrollbar Di Blogger

1. Buka Blog kalian.
2. Pilih Template lalu pilih Edit HTML.
3. Cari kode ]]></b:skin> lalu pastekan kode di bawah ini tepat di atas kode tersebut.

/* Persentase Scrollbar Lapakinfo.net */
#scrollPersentase {display:none;position:fixed;top:0;right:5px;z-index:500;padding:3px 8px;background-color:#ff69b4;color:#FFF;border-radius:3px}
#scrollPersentase:after {position:absolute;top:50%;right:-8px;height:0;width:0;margin-top:-4px;}

4. Lanjut, silahkan kalian salin kode di bawah ini dan letakan di atas kode </body>.

<div id='scrollPersentase'/>

5. Terahir salin kode di bawah ini dan letakan di atas kode </body> juga.

<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 - $('#scrollPersentase').height() / 2;
$('#scrollPersentase')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scrollPersentase').fadeOut();
}, 1500);
});
/*]]>*/
</script>

6. Simpan template kalian dan selesai.

Sangat mudah sekali bukan untuk tutorial tentang Cara Gampang Membuat Presentase Pada Scrollbar Di Blogger, jika kalian mempunyai pertanyaan seputar postingan di atas silahkan kalian bertanya melalui kolom komentar di bawah ini atau melalui halaman Contact. Terimakasih sudah berkunjung dan semoga bermanfaat.