Cara Membuat Efek Persen Pada Scrollbar Blog - MasKalem Cara Membuat Efek Persen Pada Scrollbar Blog

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.

Baca Juga


Tampilkan Komentar
Sembunyikan Komentar

0 Komentar