Membuat Efek Persen Pada Scroll Blogger

Kali ini bloggerku akan membagikan cara membuat efek persen pada scrollbar blogger, efek persen ini akan membuat blog sobat menjadi bertambah cantik, sebenarnya ini sudah lama ada yang share di blogger, yah, karena blog masih sedikit saya akan membagikan lagi cara membuatnya biar penuh hihi, biar gak penasaran sobat lihat gambar di bawah ini, atau sobat bisa klik tombol Test yang berada di bawah :D.

Membuat Efek Persen Pada Scroll Blogger

nah tadi sobat sudah lihat seperti apa tampilannya, sekarang giliran untuk cara membuatnya, yuk kita simak :D

1. Seperti biasa sobat login dulu ke blog sobat
2. Masuk ke Template > Edit HTML
3. Tambahkan kode dibawah ini tepat di atas kode ></b:skin>

#scroll {
display: none;
position: fixed;
top: 0;
right: 10px;
z-index: 500;
padding: 3px 8px;
background-color:#1e598e;
color: #fff;
border-radius: 3px;
}
#scroll:after {
content: " ";
position: absolute;
top: 50%;
right: -7px;
height: 0;
width: 0;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: rgb(139, 175, 28);
}
@media screen and (max-width:600px){
#scroll{
display:none;
}}

4. Lalu tambahkan kode dibawah ini tepat di atas kode </body>

<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 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(100);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut();
    }, 1500);
});
//]]>
</script>
<div id='scroll'/>

5. Langkah terakhir sobat save dan lihat hasilnya 8-)

nah sekian artikel tentang Membuat Efek Persen Pada Scroll Blogger, jangan lupa baca juga Cara Membuat Authorship Facebook Menjadi Link. Sampai ketemu di artikel selanjutnya :D