Cara Membuat dan Memasang Persentase Scrollbar di Blogger
Jagoandzgn.com - Pada kesempatan kali ini saya akan memberikan sebuah tutorial bagaimana Cara Membuat dan Memasang Persentase Scrollbar di Blogger dengan mudah. Persentase Scroolbar merupakan fitur menarik yang mampu menghitung berapa persen kamu melakukan scrool kebawah.
Dengan Melakukan pemasangan persentase Scroolbar ini membuat blog kamu menjadi lengkap dan menarik untuk pengunjung, dan untuk memasang Scroolbar ini pun tidak terlalu rumit, nah langsung saja kita ketutorialnya.
Berikut Cara Membuat dan Memasang Persentase Scrollbar di Blogger
1. Silahkan kamu login ke akun blogger.com kamu dengan menggunakan Gmail.
2. Masuk ke menu TEMA > klik Edit HTML
3. Kemudian kamu cari kode berikut ini ]]></b:skin> dan pastekan kode dibawah ini tepat DIATAS kode tersebut.
/* Persentase Scrollbar Jagoandzgn */
#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;}4. Setelah kamu memasang kode diatas, selanjutnya cari kode <body> dan pastekan kode dibawah ini tepat DIATAS kode tersebut.
<div id='scrollPersentase'/>5. Masih belum selesai, selanjutnya silahkan kamu tambahankan kode javascript dibawah ini tepat DIATAS kode </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 - $('#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>6. Kalau sudah silahkan klik SIMPAN dan Selesai.
Bagaimana mudah bukan untuk tutorial Cara Membuat Persentase Scrollbar Keren di Blogger Dengan Mudah, untuk kamu yang memiliki pertanyaan seputar blogger silahkan komen di kolom komentar dibawah ini.
diposting oleh Admin @ Januari 23, 2020
2 Komentar
2 Komentar:
Mantap tutorialnya bang
heheheh siap bang
Posting Komentar
Berlangganan Posting Komentar [Atom]
<< Beranda