Cara Membuat Scrollbar Presentase di Blog

Cara Membuat Scrollbar Presentase di Blogspot


Scrollbar Presentase - Sebenernya tutorial ini tidak terlalu penting buat di ikutin,tapi tutorial ini hanya untuk mempercantik tampilan blog kita saat pengunjung terus menerus scroll kebawah. Nah dengan kita memasang Presentase Scrollbar ini ,pengunjung akan melihat berapa persen halaman yang telah di scroll, apabila sampai bawah di scroll maka akan menjadi 100% dan apabila paling atas maka akan menjadi 0%. Jadi lebih unik kan blog kita apabila di pasang scrollbar presentase ini.

Mungkin tutorial ini sudah banyak yang share,namun barangkali belum ada yang tahu,maka kali ini saya share ulang tentunya dengan bahasa saya sendiri dan saya meminta maaf jika tutorial yang saya buat belum maksimal atau terlalu rumit cara pemasangannya. Tapi jika benar sobat mengalami kesulitan sobat bisa tanyakan langsung d kolom komentar. Tutorial nya juga mudah kok.


Langkah ke 1 : Login keakun blogger sobat.
Langkah ke 2 : Pergi ke Template kemudian Edit HTML
Langkah ke 3 : Copy kode dibawah ini lalu pastekan di atas ]]></b:skin> (Gunkan CTRL + F)


/* Presentase scroll */
 #scroll {
  display: none;
  position: fixed;
  top: 0;
  right: 20px;
  z-index: 500;
  padding: 3px 8px;
  background-color: #2187e7;
  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: #2187e7;
}

Langkah 4 : Cari kode </head> lalu pastekan kode dibawah ini dibawah kode </head> tadi.

<div id='scroll'></div>

Langkah 5 : Cari kode </body> lalu pastekan javascript dibawah ini tepat diatas </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 - $('#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>


Langkah 6 : Simpan dan lihat hasilnya.