CARA MEMASANG PERSENTASE PADA SCROLLBAR

CARA MEMASANG PERSENTASE PADA SCROLLBAR - Dengan menambahkan trik ini bukan hanya sebagai hiasan blog semata tetapi pengunjung bisa melihat berapa persenkah halaman yang telah discroll, apabila telah sampai di bawah halaman maka nilai persentase akan menjadi 100% dan ketika kita menariknya lagi keatas akan menjadi 0%, demikian juga sebaliknya. Jika sobat berminat untuk melakukan cara ini, itung-itung trik ini buat menghias blog agar menarik, dan apabila belum tau, contohnya seperti diblog saya ini, jadi silakkan ikuti step –by-stepnya.

_Masuk ke Blogger >> Pada Dasbor >> Pilih Template >> Edit HTML >> Expand widget templates

_Sekarang cari kode ]]></b:skin> , dan Copas kode CSS di bawah ini tepat diatas kode ]]></b:skin>.

#scroll {

display:none;

position:fixed;

top:0;

right:15px;

z-index:500;

padding:3px 8px;

background-color:#369fcf;

color:#fff;

border-radius:3px;

font-size:14px;

}

#scroll:after {

content: " ";

position: absolute;

top:50%;

right:-10px;

height:0;

width:0;

margin-top:-6px;

border:6px solid transparent;

border-left-color:#369fcf;

}

_Selanjutnya, simpan kode pemanggilnya di bawah </head>

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

_Simpan kode di bawah ini tepat di atas </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(600);

if (scrollTimer !== null) {

clearTimeout(scrollTimer);

}

scrollTimer = setTimeout(function() {

$('#scroll').fadeOut(600);

}, 1000);

});

//]]>

</script>

_Kemudian simpan Template dan lihat hasilnya.

Jika sobat melakukanya dengan benar, maka persentase tsb sudah ada di samping scrollbar.

Sumber : http://belajar-dasar-seo.blogspot.com/2015/04/cara-memasang-persentase-pada-scrollbar_5.html