Hallo sobat blogger... Kali ini saya akan berbagi sedikit pengetahuan tentang dunia programming. Yang akan saya jelaskan kali ini adalah membuat Percentage Scroll. Yap, kalau biasanya scroll itu hanya ada kotak bar hitam yang terkesan tidak menarik. Kali ini saya akan membagikan caranya kepada sobat semua. Tutorial ini pertama saya dapatkan dari blog Sis arlinadesign.blogspot.com yang saya rubah sedikit kodenya. Baiklah langsung saja kita simak caranya berikut ini.
1. Masuk ke blog sobat
2. Klik menu Template pada sidebar kiri
3. Klik Edit HTML
4. Cari kata ]></b:skin kemudian paste kode dibawah ini tepat diatasnya
#scroll {
display:none;
position:fixed;
top:0;
right:15px;
z-index:500;
padding:3px 8px;
background-color:#699F26;
color:#94B7CE;
border-radius:3px;
font-size:14px;
}
#scroll:after {
content: " ";
position: absolute;
top:50%;
right:-10px;
height:0;
width:0;
margin-top:-6px;
border:6px solid transparent;
border-left-color:#699F26;
}
5. Cari kata
</head> kemudian paste kode berikut tepat dibawahnya
<div id="scroll"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.js"></script>
<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(600);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut(600);
}, 1000);
});
//]]>
</script>
6. Klik
Simpan Template dan lihat hasilnya pada scrollbar blog sobat
Catatan :
Sobat bisa merubah warna percentage scroll-nya dengan warna lain (red, yellow, warna hex, warna RGB, dan lainnya) pada tulisan yang berwarna merah.
Baiklah sekian dari saya tentang Membuat Percentage Scroll di Blog. Semoga bisa bermanfaat bagi sobat semua :D
