Hallo sahabat blogger pada kesempatan kali ini saya akan berbagi tutorial Cara Membuat Presentase Pada Scrollbar Di Blogger dengan mudah.
Presentase scrollbar adalah merupakan fitur yang sangat menarik yang bisa menghitung berapa persen di saat kalian melakukan scroll ke bawah atau ke atas di blog kalian.
Dengan membuat presentase scrollbar pada blog kalian sudah tentu membuat blog kalian menjadi lebih lengkap dan lebih efisien.
Sebelum langsung ke tutorial saya akan jelaskan sedikit dari kegunaan presentasi scrollbar, kegunaan dari presentasi scrollbar ialah untuk mengetahui atau membantu pengunjung sejauh mana mereka pada artikel yang sedang di baca, pengunjung akan mengetahuinya dari persen pada scrollbar tersebut.
Selain itu presentase scrollbar ini sangat cocok sekali buat kalian yang suka menghiasi blog kalian karena jika blog kalian dipasang presantse scrollbar ini maka blog kalian akan lebih cantik dan pengunjung bisa betah lama - lama di blog kalian.
Untuk melihat demonya silahkan klik tombol demo yang ada di bawah ini dan lihat pada scroll bar disitu terdapat presentasenya
Untuk membuat atau memasangnya pun sangat gampang sekali, kalian bisa ikuti beberapa langkahnya dibawah ini.
Cara Gampang Membuat Presentase Pada Scrollbar Di Blogger
- Buka Blog kalian.
- Pilih Template lalu pilih Edit HTML.
- Cari kode ]]></b:skin> lalu pastekan kode di bawah ini tepat di atas kode tersebut.
/* Persentase Scrollbar telatngoding.com */
#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;}- Lanjut, silahkan kalian salin kode di bawah ini dan letakan di atas kode </body>.
<div id='scrollPersentase'/>- Terahir salin kode di bawah ini dan letakan di atas kode </body> juga.
<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 - $('#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>- Simpan template kalian dan selesai.