Cara Membuat Persentase Scrollbar Keren di Blog

Nah sekarang saya akan bagi-bagi trik blog lagi nih, tentang "Cara Membuat Persentase Scrollbar Keren di Blog" , Dengan menambahkan persentase di scrollbar, pengunjung akan bisa melihat berapa persen halaman yang telah di scroll, apabila sampai bawah di scroll maka akan menjadi 100%, membuat persentase scrollbar ini tentunya juga akan lebih menambah cuconya blog kamu xD

Bila ingin membuatnya silahkan ikuti langkah-langkah dibawah ini :
1. Masuk ke Template >> Edit HTML. Simpan kode di bawah ini tepat 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;
} 

2. Simpan kode di bawah ini tepat di bawah </head>

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

3. Simpan JavaScript dibawah ini 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(100);

    if (scrollTimer !== null) {

        clearTimeout(scrollTimer);

    }

    scrollTimer = setTimeout(function() {

        $('#scroll').fadeOut();

    }, 1500);

});

//]]>

</script>  

Selesai, mudah bukan?

Advertisement