Cara Membuat Scrollbar Dengan Persentase di Blog| Apa sih itu ?, menjelaskannya susah
liat saja scrollbar disamping kanan blog ini (di scrollbar) lalu roll kebawah dan lihat ke scrollbar yg disamping layar monitor anda ada sesuatu yang persen-persen gitu. Dan tutorial ini hanya untuk memperindah tampilan blog saja.
ini dia screenshootnya :
Langsung saja ke tutorialnya yukk :
Tutorial Cara Membuat Scrollbar Dengan Persentase
1. L
ogin ke Blogger
2.
Masuk ke template
3.
Klik edit HTML
4.
Lalu cari kode ]]></b:skin>, gunakan ctrl+f untuk mempercepat proses pencarian, jika sudah ketemu letakan kode dibawah ini tepat di atas kode
]]></b:skin>
#scroll {
display: none;
position: fixed;
top: 0;
right: 15px;
z-index: 500;
padding: 3px 8px;
background-color: #2493C4;
font-size:13px;
color: #fff;
border-radius: 3px;
}
#scroll:after {
content: " ";
position: absolute;
top: 50%;
right: -8px;
height: 0;
width: 0;
font-size:13px;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: #2493C4;
}
setelah itu, cari kode
<body> atau
<body
setelah ketemu,tambahkan kode ini di bawahnya
<body>
<div id='scroll'></div>
selanjutnya cari lagi kode
</body>, lalu letakan kode dibawah ini tepat di atas kode
</body> (gunakan tombol Ctrl+F untuk mempercepat pencarian)
<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>
5.
Simpan template
