Tuesday, March 5, 2019

Cara Membuat Persentase Scroll Pada Blog

Tags


Hallo temen temen semua kembali lagi di Sekadar Berbagi
Pada kesempatan kali ini saya ingin membagikan tips kepada kamu semua tentang Cara Membuat Persentase Scroll Pada Blog ,cara ini bisa digunakan untuk mempercantik blog kamu saat scroll
sebelum masuk ke pembahasan nya kalian bisa melihat Demo nya disini
Oke langsung saja kita masuk kepembahasannya

Langkah 1 : Seperti biasa masuk ke Template dan Edit HTML. Simpan kode ini di atas ]]</b:skin>
#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 2 : Simpan kode ini di bawah </head>
<div id='scroll'></div> 
Baca Juga : Cara Download Video Dari Youtube Tanpa Aplikasi

Langkah 3 : Simpan JavaScript ini di atas </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> 

Jika sudah silahkan Save dan lihat blog kamu :)
oke sekian dulu pembahasan kali ini semoga bermanfaat.
jika ada kendala hubungi admin@sekadarberbagi.com