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.
Seorang yang memiliki kepribadian yang menyendiri, tanpa mengenal dunia luar hanya melalui dunia online.
  • Facebook
  • WhatsApp
  • Instagram
  • Tampilkan Komentar
    Sembunyikan Komentar

    2 Komentar

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel