Cara Membuat Scrollbar Dengan Persentase ~ Aregalank Net

Hollaa,,, sobat AGC Pada hari ini saya akan kasih tau cara membuat Cara Membuat Scrollbar Dengan Persentase -_- Bingung ya/blom tau Nah maka dari itu saya akan kasih tau cara membuat nya, sebelum saya kasih tau cara nya agan bisa liat Screnshot nya di bawah ini,,

Lansung Kita Simak Pelajaran nya :

1. Masuk ke template dan Edit HTML

2. Cari Kode ]]></b:skin>, Pastekan kode berikut di atas kode tadi

#scroll {
display: none;
position: fixed;
top: 0;
right: 20px;
z-index: 500;
padding: 3px 8px;
background-color: #222222;
font-size:13px;
color: #fff;
border-radius: 3px;
}
#scroll:after {
content: " ";
position: absolute;
top: 50%;
right: -8px;
height: 0;
width: 0;
font-size:13px;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: #ccc;
}

3. Cari kode <body> atau <body
4. Pastekan kode berikut dibawah kode tadi

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

5. Nah tinggal 1 tahap lagi. cari kode </body> letakan kode berikut di atas nya

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

6. Klik Save template & Taaara Tinggal liat blog kalian,,,, :)

NB: kalo mau ganti warna background nya tinggal liat CSS nya

#scroll {
display: none;
position: fixed;
top: 0;
right: 20px;
z-index: 500;
padding: 3px 8px;
background-color: #222222;
font-size:13px;
color: #fff;
border-radius: 3px;
}
#scroll:after {
content: " ";
position: absolute;
top: 50%;
right: -8px;
height: 0;
width: 0;
font-size:13px;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: #ccc;
}

Yg tanda warna hijau itu yg di ganti

~Selamat Mencoba~

Aregalank Net

Cara Membuat Scrollbar Dengan Persentase

Related Post

4 komentar