Cara Mudah Membuat Persentase di Scrollbar Blog

Cara Mudah Membuat Persentase di ScrollBar Blog – Hampir 2 bulan lebih saya tidak posting di blog yang berdebu ini, hehehe… 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. :

Lihat Demo Persentase ScrollBar di Blog

Widget persentase ini akan terlihat menarik apabila Anda mengkombinasikannya dengan scrollbar keren yang cara membuatnya sudah pernah saya bahas di postingan sebelumnya. Oh, iya, saya ucapkan juga terima kasih kepada pemilik blog blog45apik.blogspot.com, yang telah membagikan script widget persentase di blog. Oke, berikut ini cara mudah  membuat efek persentase di scrollbar blog.

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. Lihat disini jika Anda tidak mengetahui caranya. Lalu, klik Edit HTML.

4.     Tekan CTRL + F, dan cari kode ]]></b:skin> (klik disini jika Anda tidak mengetahui cara mencari kode), 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 hapal kode HTML warna, silahkan cek disini.

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 / SaveTemplate untuk menyimpan perubahan. Buka blog Anda untuk melihat persentase pada scrollbar ini.

Bagaimana, mudah bukan? Terima kasih atas share dan + 1 yang Anda berikan. Tolong pula Invite saya di Google Plus. Selamat mencoba tutorial cara memasang efek persentase pada scrollbar di blog, dan salam Blogger!