Cara Buat Scrollbar Berwarna | Miss Durian Runtuh

Jan 6, 2012

Cara Buat Scrollbar Berwarna

Assalamualaikum semua..Harini nak buat tutorial scrollbar berwarna.Kalau korang datang blog ini guna Google Chrome memang akan nampak setiap scrollbar,samada dalam archive,dalam bloglist dan juga scrollbar window ni memang berwarna pink dan biru kan?Okay,kalau korang pengguna Chrome,Rockmelt dan lain-lain browser yang boleh pakai,memang akan berwarna scrollbar itu,tetapi kalau korang pakai Mozilla Firefox,ianya hanyalah scrollbar biasa warna kelabu itu sahaja jika korang buat tutorial ini. (Perasan tak ayat aku semua ayat nak jawab karangan,kekekeke)


1. Pergi Dashboard - Design -  Edit HTML - CTRL+F search body {
2. Dah jumpa tu,then copy kod kat bawah ini
::-webkit-scrollbar-thumb:vertical {
height:9px;
background-color: #ffcccc;
}
::-webkit-scrollbar {
width:8;
height:10px;
background:#99ccff;
margin-right:5px;
}
3.Lepas tu paste kan di bawah body {} Ingat tau,lepas penutup body tu,tadi kt cari body { kan,tpi korang pastekan lepas penutup body {.Contoh
body {
bla bla bla
}
::-webkit-scrollbar-thumb:vertical {
height:9px;
background-color: #ffcccc;
}
::-webkit-scrollbar {
width:8;
height:10px;
background:#99ccff;
margin-right:5px;
}
4. Untuk width korang boleh try la tukar-tukar sendiri ikut hati korang okay.Tukar warna untuk scrollbar,tukar #ffcccc dan tukar warna untuk background,tukar #99ccff.Nak tengok kod warna,bolah tengok sini : wikipedia atau web color.
5. Preview dan save.Hah,waktu buat ni jangan guna browser Mozilla pulak,sampai tahun depan pon tak jadi.Heheh.Tapi mane tau kan kot-kot ada orang coding-coding kod untuk scrollbar mozilla,mana tau kan.

8 Flowers:

Namika said... Reply Comment

Lawa gilea blog kakak :) Saluut ahh . Dulu adk kita pun buat blog mcm ni :D animal .

Dila Fadilah said... Reply Comment

Kak .. HBis klau yg guna template yg baru ?

.::: Princess MOMOY :::. said... Reply Comment

yeah. dah jadi
thx dear
momoy follow sini

KasihDariLaut said... Reply Comment

alhmadulilah menjadi..tgk blog lyssa x jd..thnks :D

Unknown said... Reply Comment

thanks for the tuto. blog akak memang kawaii la! lagi2 background misai tu.

shim said... Reply Comment

salam akak saya x reti la nak paste code tu kat html...bile saya search body dia x keluar acamne ye nak buat????

Anonymous said... Reply Comment

Thanks dear for this tutorial..