Cara Membuat Efek Scroll Persen Pada Scrollbar Di Blog Tanpa Ribet (Paling Mudah)

Paling-Top21- Sudah tau apa itu efek scroll persen? efek scroll persen atau persentase scrollbar merupakan efek khusus pada scrollbar suatu situs blog, yang mana fungsinya adalah untuk memberikan keterangan berapa persen halaman blog sudah dibaca.

Disebut sebagai presentase scrollbar karena memang efek ini memberikan keterangan dalam bentuk persen, dimana efek ini akan muncul ketika seseorang melakukan scroll pada kursor/mouse komputer.

Efek ini akan dimulai dari 0% sampai 100%, dimana angka 100% menandakan bahwa anda telah berada pada halaman akhir suatu situs blog.

Untuk lebih jelasnya, silahkan perhatikan tampilan scrollbar situs blog ini. Ketika anda melakukan scroll down maka efek persentasenya akan muncul, begitupula ketika anda melakukan scroll up.

Nah, untuk cara membuat efek persen ini sendiri sangatlah mudah, anda hanya perlu mengikuti panduan dibawah ini:

1. Login ke Blogger.com>>Tema>>Edit HTML.

2. Copy atau salin kode berikut, dan pastekan diatas kode </body>.

<style>
#topscroll{padding:3px 8px;border-radius:3px;display:none;position:fixed;background-color:#007bfd;color:#fff;top:0;right:10px;z-index:500;}
#topscroll:after{content:"";right:-7px;height:0;width:0;margin-top:-4px;position:absolute;top:50%;border:4px solid transparent;border-left-color:#007bfd;}
</style>
<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 - $('#topscroll').height() / 2;$('#topscroll').css('top',distance).text(' (' + Math.round(progress * 100) + '%)').fadeIn(100);if (scrollTimer !== null){clearTimeout(scrollTimer);}
scrollTimer = setTimeout(function(){$('#topscroll').fadeOut();}
,1500);}
);//]]></script>
<div id='topscroll'></div>

3. Simpan Tema, dan selesai.

Penutup

Itu dia cara mudah memasang efek persen pada scrollbar blog, cara ini bisa langsung anda aplikasikan pada situs blog anda. Sedikit tambahan saja, bahwa jika anda ingin mengubah warna persentase, maka anda bisa mengubah kode warna #007bfd pada kode diatas.

Akhir kata, saya ucapkan terimakasih. Dan jangan lupa untuk terus mengunjungi situs blog ini untuk mendapatkan informasi menarik lainnya.

Bagikan Artikel ini