Cara Membuat Persentase Scroolbar di Blogger
Dengan memasang scroolbar ini membuat blog sobat menjadi keren dan menarik, terkadang para blogger ingin mempunyai blog yang menarik dan keren. Itu sudah menjadi ciri khas kita untuk menarik para pengunjung, oleh sebab itu sobat bisa coba tutorial ini untuk membuat blog menjadi lebih menarik.
Oke, daripada lama-lama kita langsung saja ke tutorialnya, silahkan simak dengan baik-baik.
Cara Memasang Scrollbar di Blogger
- Buka dashboard blogger sobat.
- Pilih menu Tema > Edit HTML.
- Salin kode dibawah ini tepat DIATAS]]></b:skin>.
- Selanjutnya cari kode <body> dan salin kode dibawah ini tepat DIATAS kode tersebut.
- Tenang masih ada satu tahap lagi.
- Kemudian silahkan sobat cari kode</body> dan salin kode dibawah tempat DIATAS kode tersebut.
- Terakhir Simpan.
/* Persentase Scrollbar AmbyarBlog */
#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;}
<div id='scrollPersentase'/>
<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>
Post a Comment for "Cara Membuat Persentase Scroolbar di Blogger"
Silahkan Tinggalkan Komentar!