Menambahkan Efek Persentase Scrollbar Di Blogger

Efek Persentase Scrollbar Di Blogger

Cara menambahkan efek persentase di scrollbar pada blogger, efek persentase ini akan muncul ketika seseorang sedang melakukan scroll blog kalian ke atas maupun ke bawah. Persentase scroll sendiri memiliki fungsi yaitu untuk membantu pembaca blog dan juga mengetahui berapa lama lagi mereka akan membaca artikel dari blog tersebut.

Efek persentase scroll ini memuat angka digit dengan persen dan di mulai dari angka 0% hingga 100% dimana angka 100% menandakan bahwa mereka sudah berada di halaman paling bawah (akhir halaman).

Cara menambahkan efek persentase scroll di blogger

1. Pertama kalian buka Blogger.com kemudian masuk ke pengaturan tema pada blogger, lalu kalian pilih edit html tema, selanjutnya tempelkan kode html di bawah ini tepat di atas kode </body>

<!--Scrip ScrollBar Presentase-->
<style>
#kurascroll{padding:3px 8px;border-radius:3px;display:none;position:fixed;background-color:#6a17c2;color:#fff;top:0;right:10px;z-index:500;}
#kurascroll:after{content:&quot;&quot;;right:-7px;height:0;width:0;margin-top:-4px;position:absolute;top:50%;border:4px solid transparent;border-left-color:#6a17c2;}
</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'/>
<!--end-->

2. Jika sudah maka selanjutnya kalian tinggal klik simpan tema blog, lalu coba lihat hasilnya di blog kalian jika tepat penerapan kodenya akan langsung muncul otomatis di blog.
 
Catatan : Untuk mengubah warna background persentase scroll, ganti kode warna hex #6a17c2 di atas sesuai dengan warna yang diinginkan.

0 Response to "Menambahkan Efek Persentase Scrollbar Di Blogger"

Post a comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel