Cara Membuat Efek Persen Pada Scrollbar Blog

October 28, 2019

MasKalem – Halo sobat Kalem, kali ini saya akan membagikan tutorial cara untuk membuat efek persen pada scrollbar blog. Efek scrollbar pada blog bertujuan untuk memberitahukan pengunjung berapa tingginya halaman blog.

Sehingga bisa tahu Dia sedang di berapa persennya halaman yang sedang Ia baca. Berikut cara untuk membuatnya.

Membuat Efek Persen Pada Scrollbar Blog

1. Buka Blogger – Tema – Edit HTML.

2. Salin kode di bawah ini, lalu kalian tempelkan di atas kode </body>


<style>
#kalemscroll{padding:3px 8px;border-radius:3px;display:none;position:fixed;background-color:#007bfd;color:#fff;top:0;right:10px;z-index:500;}
#kalemscroll:after{content:"";right:-7px;height:0;width:0;margin-top:-4px;position:absolute;top:50%;border:4px solid transparent;border-left-color:#007bfd;}
</style>
<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 - $('#kalemscroll').height() / 2;$('#kalemscroll').css('top',distance).text(' (' + Math.round(progress * 100) + '%)').fadeIn(100);if (scrollTimer !== null){clearTimeout(scrollTimer);}
scrollTimer = setTimeout(function(){$('#kalemscroll').fadeOut();}
,1500);}
);//]]></script>
<div id='kalemscroll'></div>

3. Simpan Tema

4. Selesai.

Hanya itu saja? Yap, hanya itu saja, simpel bukan hehe.