Assalamualaikum Sobat,
Pada Kesempatan Kali Ini, Saya Akan Membagikan Cara
Membuat Persentase Pada Scrollbar Di Blog. Mungkin Sobat Sudah Pernah Melihat Dari Berbagai Kalangan Blogger Yang Blognya Memakai Persentase Pada Scrollbar-nya. Oke Baiklah, Kita Lanjut Ke Tutorialnya.
Membuat Persentase Pada Scrollbar Di Blog
- Login Terlebih Dahulu Akun Blogger Sobat.
- Klik Menu Template Lalu EDIT HTML.
- Masukan Kode Dibawah Ini Dibawah Kode ]]></b:skin>.
1234567891011121314151617181920212223
#scroll {
display: none;
position: fixed;
top: 0;
right: 20px;
z-index: 500;
padding: 3px 8px;
background-color: #009632;
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: #009632;
}
Selanjutnya Letakan Kode Berikut Dibawah Kode </head>.
<div id='scroll'></div>
- Letakan Juga Kode Berikut Diatas Kode </body>.
<script type='text/javascript'>
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>
- Simpan Dan Lihat Hasilnya.
Begitulah Cara
Membuat Persentase Pada Scrollbar Di Blog.
Semoga Bermanfaat.