Kegunaan persentase scrollbar adalah menghitung persen besaran halaman postingan kamu pada saat melakukan scroll kebawah.
Kita langsung saja masuk ke tutorialnya.
Kita langsung saja masuk ke tutorialnya.
Cara Membuat Persentase Scrollbar Pada Blogger
- Login ke akun blogger.com milikmu.
- Kemudian silahkan masuk ke menu Tema => lalu klik button Edit HTML.
- Setelah itu cari kode ]]></b:skin> dan pastekan kode dibawah ini tepat diatas kode ]]></b:skin>.
/* Persentase Scrollbar */
#scrollPersentase {display:none;position:fixed;top:0;right:5px;z-index:500;padding:3px 8px;background-color:#ff69b4;color:#FFF;border-radius:3px}
#scrollPersentase:after {position:absolute;top:50%;right:-8px;height:0;width:0;margin-top:-4px;} - Setelah kamu memasang kode tersebut, selanjutnya copy kode dibawah ini dan letakkan diatas <body>.
<div id='scrollPersentase'/> - Lalu, tambahkan juga kode javascript berikut dan letakkan diatas </body>.
<script type='text/javascript'>
/*<![CDATA[*/
var scrollTimer = null;
masukkan script iklan disini
$(window).scroll(function() {
var viewportHeight = $(this).height(),
scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scrollPersentase').height() / 2;
$('#scrollPersentase')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scrollPersentase').fadeOut();
}, 1500);
});
/*]]>*/
</script>Terakhir klik Simpan dan Selesai.
var viewportHeight = $(this).height(),
scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scrollPersentase').height() / 2;
$('#scrollPersentase')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scrollPersentase').fadeOut();
}, 1500);
});
/*]]>*/
</script>
Bagaimana? Mudah bukan "Cara Membuat Persentase Scrollbar Pada Blogger"?
Jika ada yang tidak kamu mengerti silahkan tinggalkan komentar. Terima kasih.
Jika ada yang tidak kamu mengerti silahkan tinggalkan komentar. Terima kasih.
