Blogger is now active, but still it's hard for the blogger to make time to publish some post. Btw, Thanks for dropping by

Members ♪

Thursday, June 27, 2013

Tutorial Scrollbar Bercorak




Nak try scrollbar ni? boleh boleh. Haa, Scrollbar ni dia jadi dekat Google Chrome je. Kalau nak view dekat Firefox, IE memang tak nampak scrollbar comel ni :) Hee.

1- Pergi ke Template ► Edit HTML

2- ctrl+F  dekat dalam kotak HTML tu. Cari coding ni → ]]></b:skin>

3- Lepastu, ctrl+C coding dibawah ni.

::-webkit-scrollbar {
height:12px;
width: 15px;
background : url(URL untuk background);
}
::-webkit-scrollbar-thumb {
background-color: #000000;
-moz-border-radius: 10px;
border-radius: 10px;
border: 2px solid #000000;
}

4- Paste coding tu sebelum coding ni → ]]></b:skin>.

5- Petunjuk coding :

  • webkit-scrollbar : ni adalah coding untuk background scrollbar. Kalau berdasarkan gambar yang awal-awal tu dia yang bercorak sama dengan background blog. (sorry kalau tak paham apa yang aku cuba terangkan -_-) Yang di-highlight warna kuning tu boleh tukar kalau tak nak letak background bercorak. Gantikan dengan coding dibawah :)
background-color: #ffffff;

  •  webkit-scrollbar-thumb : yang ni pulak benda yang bergerak-gerak tu. Kalau rujuk gambar kat atas, dia yang warna hitam tu. Yang di highlight warna biru tu boleh tukar kalau nak scrollbar macam kat bawah ni, gantikan coding tu dengan yang ni → background : url(URL untuk background);


  • Biru : boleh ubah warna HTML COLOR CODE
  • Hijau : Saiz ketebalan border untuk scrollbar thumb.
Sekian. Kalau ada apa-apa yang kurang jelas atau tak jadi, bagitau ya :D Arigatou.





Thanks for dropping by :)

No comments :

Post a Comment

Share anything, accept everything.
Spill your thoughts here ☺☺☺

❕Disclaimer: All content provided on this blog is for informational purposes only. The owner of this blog makes no representations as to the accuracy or completeness of any information on this site or found by following any link on this site. The owner will not be liable for any errors or omissions in this information nor for the availability of this information. The owner will not be liable for any losses, injuries, or damages from the display or use of this information.