Cara Menciptakan Persentase Scroll Pada Blog

Hallo temen temen semua kembali lagi di

Pada kesempatan kali ini aku ingin membagikan tips kepada kau semua tentang Cara Membuat Persentase Scroll Pada Blog ,cara ini dapat dipakai untuk mempercantik blog kau ketika scroll

sebelum masuk ke pembahasan nya kalian dapat melihat Demo nya disini

DEMO

Oke pribadi saja kita masuk kepembahasannya

Langkah 1 : Seperti biasa masuk ke Template dan Edit HTML. Simpan arahan ini di atas ]]</b:skin>

#scroll {
display: none;
position: fixed;
top: 0;
right: 20px;
z-index: 500;
padding: 3px 8px;
background-color: #2187e7;
color: #fff;
border-radius: 3px;
}
#scroll:after {
content: " ";
position: absolute;
top: 50%;
right: -8px;
height: 0;
width: 0;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: #2187e7;
}

Langkah 2 : Simpan arahan ini di bawah </head>

<div id='scroll'></div>

Cara Download Video Dari Youtube Tanpa Aplikasi

Langkah 3 : Simpan JavaScript ini di atas </body>

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