Pengunjung yang baik adalah pengunjung yang selalu meninggalkan komentar :)
Posted by : Fitrah Gilang Fadilah March 09, 2014

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

Cara Membuat Persentase Scrollbar Keren di Blog

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?

Tinggalkan Komentar

Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA DI SINI...</i> atau <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Copyright © 2014 Kuro Usagi - Designed by Fitrah Gilang F Template By Djogzs