Skip to main content

Cara Membuat Efek Persen Pada Scrollbar Blog

MasKalem - Halo sobat Kalem, kali ini saya akan membagikan tutorial cara untuk membuat efek scrollbar pada blog. Efek scrollbar pada blog bertujuan untuk memberitahukan pengunjung berapa tingginya halaman blog.

Sehingga bisa tahu Dia sedang di berapa persennya halaman yang sedang Ia baca. Berikut cara untuk membuatnya.

Membuat Efek Persen Scrollbar Blog

1. Buka Blogger - Tema - Edit HTML.

2. Salin kode di bawah ini, lalu kalian tempelkan di atas kode </body>


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

3. Simpan Tema

4. Selesai.

Hanya itu saja? Yap, hanya itu saja, simpel bukan hehe.

Edit kode #007bfd dengan kode warna yang kalian inginkan.

Demikian artikel mengenai Cara Membuat Efek Persen Pada Blog, terima kasih.

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar