Jun 8, 2011

Tuto customized scrolling

Ok ok k k korng perasan tak, bagi yg bkk blog fiqah ni ngan menggunakan google chroome, tepi blog fiqah tu kan ade scrolling tu an, bila masuk blog fiqah je dh jadi lain ;D hoho~ K meh mau ajar le ni~ Creadits n Thanks kepada Akak Nana sbb wat tuto ni ;D 


mcm kat gmbr ni hah~


mula-mula, pergi design n pergi edit html...
ngan menggunakan CTRL+F cari la kod ni 



]]></b:skin>


Lepas dh jumpa tu, copyla kod ni n pastekan kod ni kat atas kod ]]></b:skin> yew~
Ada 2 trend, 


Trend lama ; 

::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background:#FA5858;
border-radius: 3px;
}


Trend terbaru ; 


::-webkit-scrollbar {
width:10px;
height: 5px;
}
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment  {
height:5px;
width:7px;
display:block;
background: #F6CEE3;
border:1px solid #FA5882;
}
::-webkit-scrollbar-track-piece  {
background-color:#FFFFFF;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background-color:#F6CEE3;
border:1px solid  #FA5882;
}

Trend lagi terrrr baruuuuuu

::-webkit-scrollbar {
width: 7px;
height: 7px;
}
::-webkit-scrollbar-track-piece  {
background-color: #8ABEEE;
border: 3px solid  #fff ;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background-color: #ffa4bc;
border: 1px solid #fff;
}



apa leh rujuk kat sini~
Klau korng nak tukarkan kepada background bolehh je tau~ gantikan la kod tu ngan kod ni


background-image:url(URL IMG);
Yg warna hijau ni leh cari kat photobucket... 
Lepas tu preview la, jadi n cantik ke x n then save je la~ k la babai~

9 comments:

Farah said...

mintak share leh x??

Fi-Nurul Soosica said...

@Farah

creadit la ek :3

NANA said...

sy share yep . will credit :)
nice tuto ! :DD

Fi-Nurul Soosica said...

@NANA

hehe, tq ;) ok :)

Farah said...

@Fi-Nurul Soosica : ok fiqah..

~Yaya~ said...

Kod untk letak background tu, tukar kat mane? Neyh ke:

::-webkit-scrollbar {height:12px;width: 12px;background: #D9D9D9;}::-webkit-scrollbar-thumb {background-color: #B2C0C6;-moz-border-radius: 10px;border-radius: 10px;}

10Q :)

Fiqah Yassin said...

@~Yaya~

mane-mane pun boleh ;)

zieque95 said...

sy guna tuto nie utk blog sy . thanks for the tuto ! :)

Fiqah Yassin said...

welcome ;D