Memodifikasi Scrool Bar Blog Dengan Membuat Persentase

Semua-Niche|Memodifikasi Scrool Bar Blog Dengan Membuat Persentase,Hai,Hai
Saya hari ini akan membagian widget untuk blog anda, Widget ini disebut Persentase Untuk
Scrool Bar di blog anda,Sebenarnya saya sendiri pernah menggunakan untuk widget ini
dan juga tutorial ini sudah sangat lawas sekali,Tetapi ternyata meskipun lawas,widget ini
masih dipakai oleh blogger sekarang.

Langkah Pembuatan : 

1.Masuk Ke dalam template anda
2.Silahkan Cari Kode ]]><b:skin> Dalam Template Anda
3.Letakan Kode Dibawah Ini Diatasnya :

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

4.Cari Kembali Kode </head> Dalam Template Anda
5.Letakan Kode Dibawah Ini Diatasnya :

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

6.Langkah Selanjutnya,Cari Kode </body>
7.Letakan Kode Ini Diatas Kode Tersebut :

<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>oll-bar.html" target="_blank">Cara Membuat Persentase Pada Scroll Bar di Blog</a>

Untuk Menyesuaikan,Anda Bisa Mengganti Jenis Font,Warna Sesuai Selera