Memasang Fungsi Presentase Scrollbar Di Blogger
December 11, 2021
Add Comment
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.
DONASI VIA PAYPAL
Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain www.sudarblogger.web.id. Terima kasih.
0 Response to "Memasang Fungsi Presentase Scrollbar Di Blogger"
Post a Comment