Cara Membuat Persentase Pada Scroll Bar di Blog

dulu saya pernah membuat artikel dengan judul cara membuat scroll bar keren,  sekarang adalah lanjutan dari artikel tersebut dengan cara menambahkan persentase pada scroll bar di blog. dengan menambahkan ini kita dapt tahu berapa persen artikel yang kita baca, ketika anda memasang widget ini tampilan scroll bar anda akan menjadi bertambah cantik. utnuk car membuatnya pun cukup mudah silahkan perhatikan langkah - langkah dibawah ini :

1. masuk dulu ke akun blog anda
2. klik menu template
3. klik edit HTML
4. dan cari kode ]]></b:skin> ( gunakan ctrl+f atau f3 agar lebih cepat)
5. kemudian letakkan kode dibawah ini tepat di atasnya


#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;
}


6. kemudian cari lagi kode </head> dan letakkan kode di bawah ini tepat dibawah kode </head>


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


7. dan cari lagi kode </body> dan letakkan kode di bawah ini tepat diatasnya


<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>


8. selesai dan klik save dan kemudian lihat scroll bar blog anda

keterangan :

anda bisa mengganti kode yang sudah saya tandai dengan warna kuning, 20px untuk mengatur jarak antara scroll bar persentase dengan scroll bar, #2187e7 utnuk menggatur warna backgrund persentase, dan #fff untuk mengatur warna yang muncul di persentase

Bagikan Artikel ini