Cara Membuat Efek Persen pada Scrollbar Blog

KURAZONE ~ Halo sahabat Kurazer, pada kesempatan kali ini kita akan belajar membuat efek persen pada scrollbar blog. Efek seperti ini memberikan informasi kepada pengunjung mengenai tingginya halaman blog yang sedang diakses, sehingga pengunjung bisa tahu dia sedang berapa di berapa persennya halaman yang dia baca.

Nah, langsung saja.. Berikut adalah Cara Membuat Efek Persen pada Scrollbar Blog
1. Buka akun Blogger >> Pilih Tema >> Pilih Edit HTML
2. Copy kode dibawah ini, kemudian letakkan diatas kode </body>
<style>
#kurascroll{padding:3px 8px;border-radius:3px;display:none;position:fixed;background-color:#007bfd;color:#fff;top:0;right:10px;z-index:500;}
#kurascroll: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 - $('#kurascroll').height() / 2;$('#kurascroll').css('top',distance).text(' (' + Math.round(progress * 100) + '%)').fadeIn(100);if (scrollTimer !== null){clearTimeout(scrollTimer);}
scrollTimer = setTimeout(function(){$('#kurascroll').fadeOut();}
,1500);}
);//]]></script>
<div id='kurascroll'></div>
3. Simpan template
4. Kelar gan :v

Gitu doank?! Ya begitulah, biar tutorialnya terlihat gampang :v

Note : 
Edit kode #007bfd untuk mengganti warna

Itulah informasi mengenai "Cara Membuat Efek Persen pada Scrollbar Blog", selamat mencoba dan semoga bermanfaat. Goodluck!!





أحدث أقدم