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 / Save Template 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!

Suka Artikel Ini? Yang Share Dapat Pahala Lho... Trims!

Bagikan di FB Tweet ke Twitter! Bagikan di G+

Thanks for reading! Ingin menyebarluaskan artikel ini? Tolong sertakan juga link sumbernya (Cara Mudah Membuat Persentase di Scrollbar Blog). Klik juga tombol Google +1 dibawah. Terima Kasih! Klik juga :

Anda sibuk? Tetap baca artikel terupdate dan terbaru dari Tips SEO + Blog – PC 123 melalui e-mail Anda. Caranya? Masukkan alamat e-mail Anda pada kotak berikut ini, dan klik Daftar, dan saya akan mengirimkan artikel terbaru ke e-mail Anda. Saya menjamin privasi Anda. Untuk info lebih jelas mengenai kotak ini, silahkan klik Disini.