Sunday, September 1, 2019

Cara Membuat Efek Persen pada Scrollbar Blogspot - HTML



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

3. Simpan Tema, dan selesai.


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.

Html ini saya dapatkan dari pengembang aslinya : Admin Kurazone.net
Comments

Search This Blog

Blog Archive

Powered by Blogger.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Bawah Artikel

Iklan Tengah Artikel 2

About Me

My photo
Cuman Anak sekolah yang suka nya bolos.

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Iklan Tengah Artikel 1

Iklan Atas Artikel