October 08, 2013

author photo

Assalamualaikum dan selamat sejahtera diucapkan. Di scrollbar blog saya ada 1 jQuery yang saya telah masukkan, iaitu PERCENTAGE kalau korang perasan. Tapi, apa itu Scrollbar Percentage? Mari saya terangkan.

Scrollbar Percentage merupakan 1 jQuery yang berfungsi untuk menunjukkan peratus kedudukan scrollbar dari atas hingga ke bawah. Utuk demonya, boleh tengok di blog saya sendiri. Sekarang, adakah korang berminat untuk memasukkannya juga? Kalau berminat, ikut sahaja tutorial dibawah:


STEP 1
Login blog → Template → Download Backup → Edit HTML

STEP 2
Tekan CTRL + F pada keyboard dan cari code ]]></b:skin>. Kemudian, salin dan tampal sahaja code dibawah ini diatas code ]]></b:skin> tadi. Faham?
#scroll {
display: none;
position: fixed;
top: 0;
right: 20px;
z-index: 500;
padding: 3px 8px;
background-color: #556270;
color: #fff;
border-radius: 3px;
}
#scroll:after {
content: ” ”;
position: absolute;
top: 50%;
right: -8px;
height: 0;
width: 0;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: #556270;
}
STEP 3
Lepas itu, cari code </head> dan salin code dibawah ini dan tampalkan ia dibawah code yang dicari tadi.
<div id="scroll"></div> 
STEP 4
Kemudian, tekan CTRL + F pada keyboard dan cari code </body>. Dan tampalkan code dibawah ini betul-betul diatas code </body> tadi.
<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>
STEP 5
Tekan button preview untuk tengok, samada menjadi atau tidak. Kalau menjadi, tekan sahaja button save dan lihat hasilnya.


Nota Alam Maya:
*Code yang berwarna #556270 ialah code warna untuk background. Boleh tukar ikut citarasa sendiri.
* Code yang berwarna #fff pula ialah warna font korang. Nak tukar boleh, tanak pun tape.

Okay, sampai disini sahaja tutorial saya pada kali ini. Semoga bermanfaat untuk korang semua yang digelar bloggers. Jangan lupa kongsi link tutorial ni pada member bloggers korang yang lain ye. Assalamualaikum!
Next article Next Post
Previous article Previous Post