Tutorial : Colour Scroll Bar Style

Tutorial : Colour Scroll Bar Style
Scroll bar yang cantik berwarna lagi.. hehe...  cuba tengok dekat tepi belah kanan tuh ? ?  nak juga .. Jom follow tuto ini :))

1.Template --> Edit Html --> Tick Box Code --> CRTL+F

2. Tekan ctrl+f dan seacrh code di bawah ini
]]></b:skin>
3. Dah jumpa ke belum? copy salah satu coding dekat bawah ini dan paste ATAS code ]]></b:skin> tadi
Type Colour Scroll Bar Style

Scroll Warna
::-webkit-scrollbar {
height:3px;width: 10px;background: #000
}
::-webkit-scrollbar-thumb {
background-color: #FF0000;
-moz-border-radius: 10px;border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #FFFFFF;
-moz-border-radius: 10px;border-radius: 10px;
}
Petak Style
::-webkit-scrollbar {
width:15px;
height:10px;
}
::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment  {
height:10px;
width:10px;
display:block;
background:#FF0000;
border:1px solid #000000;
}
::-webkit-scrollbar-track-piece  {
background-color:#FFFFFF;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background-color:#FF0000;
border:1px solid #000000;
}
Track Piece
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track-piece  {
background-color: #FF0000;
border: 3px solid #FFFFFF;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background-color: #000;
border: 1px solid #FFFFFF;
}
EDIT :
ABC : Background Scroll bar
ABC : Warna Scroll bar
ABC : Warna Scroll bar Hover
Code warna di [ http://html-color-codes.info/ ]

4. Dah siap edit... SAVE dan Preview...

Taraa ! cantikan scrollbar Korunk ? ? :P


2 comments

Terima kasih kerana sudi menulis komen di blog Nurrul, sebarang pertanyaan akan dibalas secepatnya. Jazakallahu khairan