Cara Membuat Scrollbar Dengan Persentase di Blog

Hallo Sobat Blog Krizeer 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.
Sekian totorial kali ini dan semoga bermanfaat :D
sumber source : AH-SHARED

5 komentar untuk "Cara Membuat Scrollbar Dengan Persentase di Blog"

  1. Balasan
    1. kan ada tuh postingan paling bawah sumber source : AH-SHARED :D

      Hapus
  2. Keren sob ..
    tpi ane mau yg jam yg punya sob itu gmna

    BalasHapus
  3. oke ditunggu kunbalnya! http://ferdirahmadrizaldi.blogspot.com/

    BalasHapus

Untuk menyisipkan kode, gunakan tag <i rel="code">Kode disini...</i> atau <i rel="pre">Kode disini...</i>
Untuk menyisipkan gambar, gunakan <i rel="image">URL gambar disini...</i>
Untuk menyisipkan catatan, gunakan <b rel="quote">Tulis catatan disini...</b>
Untuk menciptakan efek tebal, gunakan tag <b>Teks anda disini...</b>
Konversi Kode Back to Top

Back to Top