Cara Membuat Scroll Persen
Infobio blog, kali ini aku akan memperlihatkan isu mengenai cara menciptakan efek scroll persen.
Cara menciptakan scroll persen di blog itu ternyata sangat gampang gan, kalian dapat membuatnya dalam hitungan detik.
Cara menciptakan scroll persen ini hampir sama dengan memasang instruksi atau unit iklan otomatis pada template blogger, kalau memasang instruksi unit iklan otomatis kita harus menyiapkan instruksi iklan di bawah tag <head> atau di atas instruksi </head>.
Untuk menciptakan efek scroll persen, anda hanya perlu menyisipkan instruksi di atas tag </body>.
Membuat Scroll Persen
Inilah instruksi html untuk menciptakan scroll persen pada blogger.
<style>
#kurascroll{padding:3px 8px;border-radius:3px;display:none;position:fixed;background-color:#222222;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:#222222;}
</style>
<script type='text/j4vascript'>
//<![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'/>
Ingat ya, sisipkan instruksi html ini di atas tag </body> .
Selanjutnya klik simpan, dan lihat hasil dari efek scroll persen pada blog anda.
Untuk warna efek scroll persen, anda juga dapat mengubah nya dengan warna yang diinginkan, kalian dapat mengganti instruksi warna #222222 dengan instruksi warna lain.
Itulah salah satu cara termudah untuk menciptakan scroll persen pada blog.
Mungkin cukup sekian ulasan singkat mengenai Cara Membuat Scroll Persen pada Blog. Jika ada pertanyaan kalian dapat berkomentar di bawah ini.
Sumber http://infobio-blog.blogspot.com
