Mungkin dari kamu ada pertanyaan seperti itu, ini sangat penting sekali dimana pengunjung bisa tau kalau berapa presentase Scrollbar saat membaca artikel pada blog milik kamu.
Memasang presentase Scrollbar ini tidak hanya untuk hiasan semata akan tetapi pengunjung akan tau juga sudah berapa persen halaman yang sudah mereka baca.
Untuk memasang nya pun sangat lah mudah kamu cukup ikuti aja tutorial yang ada di bawah ini ya gaes.
#scroll {
display:none;
position:fixed;
top:0;
right:15px;
z-index:500;
padding:3px 8px;
background-color:#369fcf;
color:#fff;
border-radius:3px;
font-size:14px;
}
#scroll:after {
content: " ";
position: absolute;
top:50%;
right:-10px;
height:0;
width:0;
margin-top:-6px;
border:6px solid transparent;
border-left-color:#369fcf;
}
Selanjutnya, simpan kode pemanggilnya di bawah </head>
<div id='scroll'></div>
Simpan kode di bawah ini tepat 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(600);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut(600);
}, 1000);
});
//]]>
</script>
Kemudian simpan Template dan lihat hasilnya.
Jika langkah-langkah yang anda lakukan tidak salah, maka blog anda seharusnya sudah ada persentase di samping scrollbar.
Cukup mudah bukan. Selamat mencoba.
Post a Comment for "Memasang Fungsi Presentase Scrollbar Di Blogger"