Cara Membuat Persentase Pada Scrollbar Blog
18.52.00
18 Komentar
1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode ]]></b:skin>
4. Copy kode script dibawah ini, lalu Paste diatas kode ]]></b:skin>
/* Scroll Persentase */
#scroll{display:none;position:fixed;top:0;right:5px;z-index:500;padding:3px 8px;background-color:#4B4B4B;color:#FFF;border-radius:3px}
#scroll:after{position:absolute;top:50%;right:-8px;height:0;width:0;margin-top:-4px;border:4px solid transparent;border-left-color:#4B4B4B}- Kode 5px : Jarak dari scrollbar, semakin besar angka yang diberikan maka akan semakin jauh letaknya.
- Kode 3px 8px : Merupakan tinggi dan lebarnya kotak persen
- Kode yang berwarna #4B4B4B : Warna background kotak persen
- Koda yang berwarna #FFF : Warna huruf pada kotak persen
- Kode yang berwarna 3px : Memberikan efek melengkung pada kotak persen
Untuk mengganti warna silahkan kunjungi ini Kode Warna HTML
5. Cari kode <body>
6. Copy kode dibawah ini, lalu Paste dibawah kode <body>
<div id='scroll'/>8. Copy kode dibawah ini, lalu Paste 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. Copy javascript berikut, lalu Paste diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>Jika blog Anda sudah memiliki JavaScript seperti diatas, Anda tidak perlu memasangnya lagi. Tetapi untuk jaga-jaga lebih baik memasangnya saja.
Sekian artikel mengenai Cara Membuat Persentase Pada Scrollbar Blog. Kurang lebihnya mohon maaf.
Semoga Bermanfaat...
izin yoba nya gan
BalasHapussilahkan sob... :)
HapusMantab, Gan, Infonya.... Thanks tuk sharenya :)
BalasHapusiya sob, semoga bermanfaat...
Hapusmantap nih,
BalasHapuslangsung praktek ahh ..
thanks udah share sob, yuk kunjungan baliknya :)
silahkan sob,,. semoga bermanfaat (y)
Hapusthanks gan sharenya :D " Cara Membuat Persentase Pada Scrollbar Blog " sangat berguna gan :D
BalasHapusiya sob, makasih sudah mampir kesini... :D
HapusMakasih dah share ..!! nambah ilmu nih.. :D
BalasHapussama-sama sob,
Hapussemoga bermanfaat :)
mau tanya kok body gak ada ya ? ?
BalasHapuspasti ada, cari saja body, jangan pakai tanda pembuka sama penutup
Hapusgan mau tanya , kok' body gak ada di cari ??
BalasHapusgk bisa ga
BalasHapuskok gak bisa? ,udah di turutin smua padahal
BalasHapusBang... Blog Ente Artikelnya bagus2 kenapa ga ada Google Adsense nya.... maaf cuma penasaran aja, blog dengan artikel begina biasanya ada GA....
BalasHapushehe, dulu sudah daftar sekitar 6 bulan lalu, sebelum pakai domain TLD, dan hasilnya di tolak, sampai saat ini saya masih enjoy saja tanpa iklan
Hapuskok punya kamu ga di pasang kyk begitu gan,,, ini persentase scroll ya
BalasHapus