Cara Membuat Persentase di Scrollbar Blog

  Kali ini saya akan berbagi tips mengenai cara membuat efek persentase di scrollbar blog. Maksudnya? Widget persentase ini akan berada di sebelah scrollbar, dan menunjukkan berapa persen scrollbar telah digulung. Jika Anda masih bingung, berikut ini tampilannya. :

Keren kan, Jika berminat ikuti tips di bawah ini :

1.     Pertama, login ke Blogger, dan pilih blog yang ingin Anda beri widget persentase scrollbar.

2.     Masuk ke bagian Template.

3.     Backup dulu template blog Anda. Lalu, klik Edit HTML.

4.     Tekan CTRL + F, dan cari kode ]]></b:skin>, lalu copy dan pastekan kode berikut tepat diatas / sebelum kode ]]></b:skin>

#scroll {

  display: none;

  position: fixed;

  top: 0;

  right: 20px;

  z-index: 500;

  padding: 3px 8px;

  background-color: #FF8000;

  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: #FF8000;

}

Catatan :

Ganti kode 20px untuk mengubah jarak antara persentase scrollbar dengan scrollbar blog

Ganti kode #FF8000 untuk mengubah warna persentase scrollbar.

Ganti kode #fff untuk mengganti warna angka yang ditampilkan dalam persentase scrollbar.

  Jika anda tidak tau tentang kode2 warna, bisa menggunakan Photoshop. seperti gambar di bawah ini:

5.     Selanjutnya, cari kode </head>, dan pastekan kode berikut tepat dibawah / sesudah kode </head>

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

6.     Terakhir, cari kode </body>, dan pastekan script dibawah ini DIATAS / SEBELUM kode </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>

7.     Sebagai penutup, silahkan klik Simpan / Save Template untuk menyimpan perubahan. Buka blog Anda untuk melihat persentase pada scrollbar ini.

Source by : http://kizrap.blogspot.com/