Cara Membuat Efek Persen pada Scrollbar Blog

Pilihan Editor :

Cara Membuat Efek Persen pada Scrollbar Blog
Penulis Kurazone
2
Modus malam
AAA
KURAZONE ~ Halo sahabat Kurazer, pada kesempatan kali ini kita akan belajar membuat efek persen pada scrollbar blog. Efek seperti ini memberikan informasi kepada pengunjung mengenai tingginya halaman blog yang sedang diakses, sehingga pengunjung bisa tahu dia sedang berapa di berapa persennya halaman yang dia baca.

Nah, langsung saja.. Berikut adalah Cara Membuat Efek Persen pada Scrollbar Blog
1. Buka akun Blogger >> Pilih Tema >> Pilih Edit HTML
2. Copy kode dibawah ini, kemudian letakkan diatas kode </body>
<style>
#kurascroll{padding:3px 8px;border-radius:3px;display:none;position:fixed;background-color:#007bfd;color:#fff;top:0;right:10px;z-index:500;}
#kurascroll:after{content:"";right:-7px;height:0;width:0;margin-top:-4px;position:absolute;top:50%;border:4px solid transparent;border-left-color:#007bfd;}
</style>
<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 - $('#kurascroll').height() / 2;$('#kurascroll').css('top',distance).text(' (' + Math.round(progress * 100) + '%)').fadeIn(100);if (scrollTimer !== null){clearTimeout(scrollTimer);}
scrollTimer = setTimeout(function(){$('#kurascroll').fadeOut();}
,1500);}
);//]]></script>
<div id='kurascroll'></div>
3. Simpan template
4. Kelar gan :v

Gitu doank?! Ya begitulah, biar tutorialnya terlihat gampang :v

Note : 
Edit kode #007bfd untuk mengganti warna

Itulah informasi mengenai "Cara Membuat Efek Persen pada Scrollbar Blog", selamat mencoba dan semoga bermanfaat. Goodluck!!

2 komentar:

  1. Wah siap kak, sangat membantu banget.. mau langsung coba praktik aja

    BalasHapus
  2. Wkwk keren artikelnya simpel. Kirain mah tutorialnya panjang

    BalasHapus

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar TIDAK di moderasi.