Tutorial : Scroll Bar Berwarna

Salam readers.

Tutorial ini di-request oleh McDa. Oke macam mana nak cantikkan scroll bar? Contohnye macam kat blog saye ni. Sila refer gambar di bawah.


Nak jugak macam tu? So boleh lah follow step yang saye kasi ni oke.

1. Dashboard > Design > Edit Html > Tick Expand Widget

2. Ctrl+F, cari kod ni
]]></b:skin>
3. Dah jumpa? Copy kod kat bawah ni
::-webkit-scrollbar {
height:12px;
width: 12px;
background: #ffffff;
}
::-webkit-scrollbar-thumb {
background-color: #ff3399;
-moz-border-radius: 10px;
border-radius: 10px;
border: 1px solid #ffffff;
}
4. Paste kod tu kat atas kod ]]></b:skin>

5. Jom adjust ikut cita rasa masing2.

Teks kaler kuning tu untuk kaler background scroll bar
Teks kaler biru pulak untuk scroll bar tu
Border :
- 1px untuk ketebalan
- solid untuk jenis border. Boleh pilih solid, dashed atau dotted
- teks kaler hijau tu untuk kaler border

Untuk kod kaler, korang boleh cari di sini or sini.

6. Siap :)

Tutorial Tambahan :

Kalau nak scroll bar korang tu bercorak, korang gune koding ni
::-webkit-scrollbar {
height:12px;
width: 12px;
background: #ffffff;
}
::-webkit-scrollbar-thumb {
background-image:url ('URL BACKGROUND');
-moz-border-radius: 10px;
border-radius: 10px;
border: 1px solid #ffffff;
}
Gantikan teks kaler kuning tu dengan url background yang korang nak.

- Happy Trying -

Comments

princess said…
CT , nak tnye . cne nak wt mcm 'belog miszathirah' tu ?
ketodd :D said…
boleh kasik freebies corak untuk scroll bar ni tak?
Qilah said…
nape x jadi erk ? :(
Cik Tyrah said…
@Qilah

Tuto ni utk pengguna Google Chrome. Maybe tak jadi sbb sis gune browser lain atau salah letak code :)
Suka blog ni ^^
tersangat leww berguna, thanks :)
Iza Zaty said…
aww, thx kak.. menjadi !!!! :)
Aira Amir said…
Thanks for the tuto..
lama dah cari.. baru jumpa..
trime kasih bnyk-2 kak.. slame ni sy cari scroll bar untuk template blog sye, sumer nye tak sesuai.. bile cube tuto yg akak buat ni, menjadi la plakk. once again, terima kasih yer.