Cara Pasang Persentase Pada Scrollbar

DEMO

Postingan selanjutnya mengenai cara memasang fungsi persentase pada scrollbar blog. Mungkin anda pernah melihat fungsi persentase ini di blog lain.

Sebenarnya persentase scrollbar ini bukan fitur yang penting bagi sebuah blog. Namun tidak ada salahnya untuk dicoba, itupun tergantung selera masing-masing.

Dengan menambahkan persentase ini bukan hanya sebagai hiasan blog semata tetapi pengunjung akan bisa melihat berapa persen halaman yang telah Ia scroll, apabila telah sampai di bawah halaman maka nilai persentase akan menjadi 100%.

Cara penerapannya pun cukup mudah, silahkan ikuti langkah-langkah sederhana berikut ini :

Pertama, simpan kode di bawah tepat di atas ]]></b:skin> atau </style>

#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 langkah-langkah yang anda lakukan tidak salah, maka blog anda seharusnya sudah ada persentase di samping scrollbar. Cukup mudah bukan. Selamat mencoba.

Tags: #Blogger