Cara Buat Scrollbar Percentage Dengan jQuery
Assalamualaikum dan salam sejahtera..
Hari nie, aku nak share tutorial tentang blog pulak.. Korang pernah dengar or nampak tak ScrollBar Percentage dekat mana-mana blog? Blog aku yew lah, memang pakai ScrollBar Percentage nie.. Kalau tak pernah, takpe-takpe.. Hari nie, meh aku terangkan, dan ajar korang macam mana nak letak ScrollBar Percentage nie dekat blog..
ScrollBar Percentage nie sebenarnya berfungsi untuk menunjukkan berapa percent jarak antara scrollbar korang dari scroll atas sekali, hinggalah ke scroll di bahagian bawah, iaitu bahagian footer blog.. Kalau korang nak tengok demo, korang boleh tengok dekat blog aku nie.. ^_^
Tanpa lengahkan masa dengan buat penerangan macam karangan, jom kita mulakan tutorial hari nie..
1. Login akaun Blogger korang
2. Pergi ke Template > Edit HTML (Lebih baik, korang backup template dulu, takut-takut tak jadi kang, susah! >.<)
3. Dengan gunakan kekunci CTRL + F, korang cari kod ]]></b:skin>.
4. Kalau dah jumpa, salin dan tampal kod dekat bawah nie betul-betul di atas kod tadi.
5. Lepas tuh, korang gunakan kekunci CTRL + F tadi, dan cari pulak kod </head>.
Hari nie, aku nak share tutorial tentang blog pulak.. Korang pernah dengar or nampak tak ScrollBar Percentage dekat mana-mana blog? Blog aku yew lah, memang pakai ScrollBar Percentage nie.. Kalau tak pernah, takpe-takpe.. Hari nie, meh aku terangkan, dan ajar korang macam mana nak letak ScrollBar Percentage nie dekat blog..
ScrollBar Percentage nie sebenarnya berfungsi untuk menunjukkan berapa percent jarak antara scrollbar korang dari scroll atas sekali, hinggalah ke scroll di bahagian bawah, iaitu bahagian footer blog.. Kalau korang nak tengok demo, korang boleh tengok dekat blog aku nie.. ^_^
Tanpa lengahkan masa dengan buat penerangan macam karangan, jom kita mulakan tutorial hari nie..
1. Login akaun Blogger korang
2. Pergi ke Template > Edit HTML (Lebih baik, korang backup template dulu, takut-takut tak jadi kang, susah! >.<)
3. Dengan gunakan kekunci CTRL + F, korang cari kod ]]></b:skin>.
4. Kalau dah jumpa, salin dan tampal kod dekat bawah nie betul-betul di atas kod tadi.
#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;
}
Bila dah jumpa, salin dan tampal kod nie di bawah kod yang kita cari tadi.
<div id=’scroll’></div>6. Kemudian, korang cari pulak kod </body> dengan gunakan kekunci tadi.
Bila dah jumpa kod </body>, korang salin dan tampal kod kat bawah nie, betul-betul sebelum kod </body> tuh tadi.
<script type=’text/javascript’>7. Akhir sekali korang Preview duluu, kalau menjadi baru Save Template, dan siap!
//<![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>
*Note
Kod yang berwarna:
- #556270 - Korang boleh ubah warna dia, ikut sesuka hati korang ataupun dengan citarasa korang sendirilah. :)
- #fff - Ini warna teks ataupun font korang. Inipun korang boleh ubah dia ikut warna yang korang suka ataupun menepati citarasa korang. ;)
Semoga, dengan tutorial tanpa gambar nie, korang akan faham dan dapat manfaatkan dia dengan baik.. Sekian sahaja dari aku, assalamualaikum.. Salam Aidilfitri..
0 orang pengomen yang tercomel ! :
Ping Widget
Popular Posts
-
Assalamualaikum dan salam sejahtera.. Tadi, masa aku dok syok layan Facebook, tetiba ada satu video, yang terpampang di wall Facebook, di... -
Assalamualaikum dan salam sejahtera. Sebelum tuh, aku nak minta maaflah sebab jarang-jarang update sepanjang penggal 2 minggu nie. Aku bu... -
Assalamualaikum dan salam sejahtera. [ + ] Klik untuk dapatkan tampilan yang lebih jelas. Fuhh! Agak lama aku tak posted.. 2 mingg... -
Assalamualaikum dan salam sejahtera semua.. Dalam kumpulan penggodam antarabangsa Anonymous telah melancarkan #OPIsrael, aku baru dapat b... -
Assalamualaikum dan salam sejahtera.. Bila dah berbulan-bulan tak update, sekarang dah masuknya cuti akhir tahun. Jadi, pada masa nie lah... -
Assalamualaikum dan salam sejahtera.. [+] Klik untuk dapatkan tampilan yang lebih jelas. Hari ini, aku berkesempatan jugak untuk pos... -
Assalamualaikum dan salam sejahtera semua. Whoo.. Excited gila aku nak buat tutorial Photoshop buat kali yang pertama. Hehe.. Korang maca... -
Assalamualaikum dan salam sejahtera. Maaf sangat kepada korang semua yg selalu sudi datang ke blog Pengembara Awan nie.. Maaf lah sebab l... -
Assalamualaikum dan salam sejahtera.. Korang mesti selalu layari laman web Facebook nie kan? Dan kalau dah layari, mesti lah ada akau... -
Assalamualaikum dan salam sejahtera semua. GIVEAWAY FOR FOLLOWERS! Apa khabar semua? Sihat tak? Hehe. Aku sihat-sihat jak.. Hmm, ini...
statistics
Ads 1
Ads 2
./ Qimie Mohamad @ Qimie
./ Islam
./ Orang Pahang
./ 14 Januari 2000
./ Masih Belajar
./ Have a nice day!
Ads 2
Post a Comment