Cara Membuat Persentase Pada Scrollbar Di Blog

Cara Membuat Persentase Pada Scrollbar Di Blog - Sore ini di hari kamis yang mendung, saya posting tutorial blogger pemula di sekolah saya. :v karena sudah beberapa hari ini saya tidak posting tutoria blogger lagi. Saya sempatkan main internet pulang sekolah demi posting untuk hidupnya blog saya ini. Karena kuota modem saya abis. :D Dan sore ini saya akan bahas tutorial tentang Cara Membuat Persentase Pada Scrollbar Blog.

Tentunya banyak sekali para blogger yang menggunakan template dengan tampilan persen pada scrollbar di blog mereka. Tapi tenang, buat template sobat yang tidak ada tampilan persentase pada scrollbar di blog bisa ikuti tutorial ini. Tapi, sebelumnya, saya akan jelaskan dulu mengenai tutorial yang satu ini.

Tampilan persentase pada scrollbar blog akan muncul mulai dari 1% hingga 100%. Jika blog sobat sudah terpasang dan mengikuti tutorial ini, maka jika kita scroll ke paling atas maka akan muncul 1% dan untuk 100% adalah tampilan paling bawah.

Entah kenapa dan apa para designer web yang jago membuat template dengan memasang tampilan persentase scrollbar 100% di blog. Saya juga tidak mengetahui alasan yang pasti kenapa para designer web memasang persentase pada template blog yang dibuat nya. 

Tapi kemungkinan menurut saya untuk mengetahui seberapa persen posisi tampilan blog saat pengunjung mampir ke blog sobat yang sudah terpasang tutorial ini. Seumpama bog sobat panjang sekali kata-kata didalam artikel blog sobat, tentunya scrollnya juga panjang. Atau mungkin, blog sobat rame sehingga banyak yang beromentar di blog sehingga mengharuskan scroll paling bawah untuk melihat footer atau ingin berkomentar jika posisi komentar blog sobat ada dibawah.

Mungkin ini untuk memudahkan pengunjung agar tau posisi tampilan nya ada di berapa persen. Biar gak kebingungan gitu. :v

Untuk contoh gambar dari cara membuat persentase scrollbar 100% di blog bisa lihat gambar dibawah:

Cara nya agak panjang, jadi sobat harus cermat membaca tutorial ini.
1. Login Blogger
2. Klik template/rancangan
3. Edit HMTL
4. Cari kode

 ]]></b:skin> 

(agar lebih memudahkan untuk mencari, klik kolom edit HTML, kemudian tekan secara bersamaan pada keyboard Ctrl+F)
5. Setelah ketemu, copast kode dibawah ini. Letakkan kode dibawah ini tepat DIATAS 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;
}

*Keterangan:
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.
Untuk mengganti kode warna, silahkan cek disini: KODE WARNA
6. Cari lagi kode

</head>

7. Copy kode dibawah ini kemudian paste dan letakkan diatas kode </head>

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

8. Kemudian cari lagi kode

</body>

9. Copy kode dibawah ini kemudian paste dan letakkan diatas 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>

10. Simpan



Jangan lupa, ketika sudah mencoba dan berhasil, beri komentar... Kalau masih gagal, coba lagi. Semoga berhasil... ˆ⌣ˆ

Tutorial Blogger

Judul	Cara Membuat Persentase Pada Scrollbar Di Blog
Deskripsi	Cara membuat persentase pada scrollbar di blog memudahkan pengunjung Anda untuk mengetahui berapa persen posisi tampilan blog Anda.
Author	Google
Author Rating	87%/ 100% Suara Dari 2244 votes