Cara Membuat Scrollbar Dengan Persentase

Cara Membuat Scrollbar Dengan Persentase

Hallo Sobat Blogger Indonesia pada kesempatan kali ini saya akan membagikan tutorial mengenai Cara Membuat Scrollbar Dengan Persentase.

apa sih itu ?, menjelaskannya susah liat saja scrollbar di blog ini sebagai demonya. dan tutorial ini hanya untuk memperindah tampilan blog saja.

ini dia screenshootnya :

Langsung saja ke tutorialnya yukk :

Tutorial Cara Membuat Scrollbar Dengan Persentase

saya anggap kalian sudah memasang custom scrollbar, bila belum memasang scrollbar bisa dibaca di artikel

Cara Mengganti Tampilan Scroll Bar Menjadi Keren di Blog:

1. login ke Blogger

2. masuk ke template

3. klik edit HTML

4. lalu cari kode ]]></b:skin>, gunakan ctrl+f untuk mempercepat proses pencarian, jika sudah ketemu letakan kode dibawah ini tepat di atas kode ]]></b:skin>

#scroll {
display: none;
position: fixed;
top: 0;
right: 15px;
z-index: 500;
padding: 3px 8px;
background-color: #2493C4;
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: #2493C4;
}

setelah itu, cari kode <body> atau <body
setelah ketemu,tambahkan kode ini di bawahnya <body>

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

selanjutnya cari lagi kode </body>, lalu letakan kode dibawah ini tepat di atas kode </body> (gunakan tombol Ctrl+F untuk mempercepat pencarian)

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

5. yang terakhir simpan template, dan lihat hasilnya :D

Untuk Setting
untuk mengganti warna background, cari background-color: #2493C4,lalu ganti warnanya, untuk mengatur jarak Scroolba Persentase dengan Scrollbar cari kode right: 15px; lalu ganti, untuk menggantinya kode 15px ganti menjadi 10px, 20px, dan selanjutnya, dan yang terakhir untuk mengubah warna teks cari kode color: #fff; dan ganti kode warna biru muda tersebut dengan kode warna yang kalian inginkan.

Cara Membuat Scrollbar Dengan Persentase

Cara Membuat Scrollbar Dengan Persentase

Tanggapi untuk "Cara Membuat Scrollbar Dengan Persentase"

Post a Comment