Tutorial Membuat Scroll Presentase

Hai selamat malam nah pada kesempatan ini saya akan bahas tutorial bagaimana cara membuat Presentasi pada scroll di blog kalian. tentunya dengan adanya animasi ini akan menambah cantik blog kalian untuk itu silahkan simak langkah ini dengan sebaik mungkin.

Pertama silahkan masuk menu Template kemudian pilih Edit HTML

Selanjutnya salin kode berikut (di bawah) dan simpan di atas/sebelum kode ]]></b:skin> or </style>

#scroll {
  display:none;
  position:fixed;
  top:0;
  right:15px;
  z-index:500;
  padding:3px 8px;
  background-color:#369fcf;
  color:#fff;
  border-radius:3px;
  font-size:14px;  
}
#scroll:after {
  content: " ";
  position: absolute;
  top:50%;
  right:-10px;
  height:0;
  width:0;
  margin-top:-6px;
  border:6px solid transparent;
  border-left-color:#369fcf;
}

Kemudian simpan kode di bawah tepat di bawah kode </head>

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

Selanjutnya simpan kode berikut tepat 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(600);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut(600);
    }, 1000);
});
//]]>
</script>

dan Terakhir save.. Lihat Hasilnya

Nah ok sobat mungkin itu saja tips yang kali ini saya bisa berikan semoga bermanfaat. Sekian dan terimakasih

Admin

Berbagi tips tentang dunia Blogger

Facebook

WhatsApp

Instagram

Bagikan Artikel ini

Related Posts