Wednesday, December 14, 2011

customized scrollbar

ok, nie dia tutorial scrollbar yang awesome. i copied this from my other blog and post it here since i said just now blog nie dah active balik :) i do this coding by myself ok... it might sama ngan u guys punya but seriously. i buat sendiri. huuuuaaargghhh ngantoknye weyhh (-,-) HAHA. cuz selalu tido lambat la... xpe2. ade lagi satu story nak share. wait and seeee :)




heyyo people. ok, just finished doing some states paper on Chemistry (-_-") and zuzu perasan like almost the state ulang the same questions on paper 2 :) harap2 boleh jawap esok. amin ~(^_^)~ *human wave* after study tadi dapat ilham nak buat tuto plak. haha. here's something zuzu nak share. ok, ramai nak tau acano nak buat scrollbar yang cute miut tu kn? hehe. ouh well, i have the solution.

*STRICTLY for Google Chrome users only*
1st : pergi Dashboard >> Design >> Edit HTML
2nd : click Ctrl+F serentak & cari code nie
]]></b:skin>
3rd : copy code yang kat bawah nie & paste sebelum ]]></b:skin> tadi
::-webkit-scrollbar {
height:12px;
width: 7px;
background: #fff;}
::-webkit-scrollbar-thumb {
background-color: #000;
-moz-border-radius:7px;
border-radius:7px;}
** yang warna biru tu boleh carik kat sini, yang warna hijau tu ialah scrollbar tu. if korang nak tukar jadi kepada image replace code hijau tu ngan code bawah nie :
background-image:url(URL image);
*** kalau nak tambah border pulak lepas code border-radius:7px; tambah code bawah nie :
border: 2px dashed #000000;
**** kalau nak effect hover plak... bila cursor sentuh kat scrollbar it changes color. copy code bawah nie :
::-webkit-scrollbar {
height:12px;
width: 7px;
background: #fff;}
::-webkit-scrollbar-thumb {
background-color: #000;
-moz-border-radius:7px;
border-radius:7px;}
::-webkit-scrollbar-thumb:hover{background-color: #fff;}
4th : if dah satisfy preview then save ok?


hope this help u people out there tu have a very cute and awesome blog. hehe. ingat jangan pelik pulak if korang view kat Mozilla Firefox xde scrollbar tu cuz tuto nie for google chrome je (^_^)V peace...

0 comment(s):

Post a Comment

Thanks for reading this post

Hye brader and sisto, cakap je ape nak!
Tapi ayat kasi elok sikit ok.