Sabtu, 17 Mei 2014

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. :

Preview widget persentase yang sudah dipasang di scroll bar blog. Menarik bukan? (Gambar tidak terlihat? Klik kanan tulisan ini, dan pilih 'Reload Image!')


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!

2 komentar:

  1. tipnya keren banget gan, saya mau coba buat di blog saya

    BalasHapus
  2. hahaha promo ga tanggung-tanggung 19 link sekaligus :P

    BalasHapus

Kurang mengerti dengan artikel diatas, ingin menanyakan sesuatu yang kurang jelas atau ingin meninggalkan jejak? Silakan gunakan Kotak Komentar!. Jika Anda ingin meletakkan kode HTML pada kotak komentar, gunakan tools HTML Parser But, remember! Berkomentarlah dengan bahasa yang sopan, tanpa iklan, spam politik, porno, dan hal - hal negatif lainnya. Terima kasih!