Cara Memasang Efek Persentase Pada Scroll Bar Blog

Cara Memasang Efek Persentase Pada Scroll Bar Blog - Persentase Scroll Bar memberikan efek khusus pada Scroll Blog, yang berfungsi untuk memberikan sejauh mana kita mengscroll sebuah artikel dan banyak juga yang sudah memasang persentage scroll bar di blog mereka untuk sebatas desain blog agar terlihat lebih profesional.

Scroll Bar Persentase dimulai dari 0% Paling atas Hingga 100% Paling bawah, menurut saya  memberikan Efek Presentase pada scroll bar blog cukup berguna ya, berguna untuk para pembaca dan juga berguna untuk mempercantik tampilan blog kalian.

Jika teman-teman tertarik memasang Efek Presentase di Scroll Bar Blog kalian, silakan ikutin langkah-langkah dibawah ini :

Cara Memasang Efek Persentase Pada Scroll Bar

1. Masuk kedalam Dashboard Blog kalian.

2. Masuk ke Menu Tema => Edit HTML

3. Salin kode dibawah ini dan letakkan di atas kode </body>

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

4. Simpan Tema !!

Demikian Artikel Cara Memasang Efek Persentase Pada Scroll Bar Blog, jika ada yang ingin ditanyakan tentang artikel ini silakan komen di kolom komentar ya.

Bagikan Artikel ini