Showing posts with label Tutorial Scroll Bar Berwarna. Show all posts

Tutorial : Scroll Bar Berwarna Part2

Sebelum ini deno ada kongsikan tutorial scroll bar berwarna. Kali ini scroll bar pun berwarna jugak tapi hasilnya macam ni :

1. Log in > Dashboard > Template > Edit HTML

2. Tekan Ctrl F dan search kod bawah ni:
]]></b:skin>

3. Dah jumpa? Ok good. Sekarang copy kod bawah ni pula :
::-webkit-scrollbar {height:12px;width: 12px;background:#FFFFFF ;}

::-webkit-scrollbar-thumb {background-color:#F6CEEC ;-moz-border-radius: 10px;border-radius: 10px;border: 1px solid #FFFFFF;

Pink : background scroll bar
Biru : warna scroll bar
*korang pilih warna di SINI

4. Paste kod tu (step3).... ATAS  kod  ]]></b:skin>

5. Preview, kalau takde error korang boleh Save template :)


p/s: kalau tak faham boleh tanya deno ya *scroll bar berwarna hanya menjadi pada pengguna google chrome sahaja


Tutorial : Scroll Bar Berwarna

Haaa... Kali ini deno nak kongsikan tutorial scroll bar berwarna pula^^ Ada newbie yang request, sori ya dik baru sekarang kakdayang sempat buat^^ *rasa tua pula, hihi :p
scroll bar hasilnya macam ni :

Okey jom mula!^^
1. Log in > Dashboard > Template > Edit HTML

2. Tekan Ctrl F dan search
body {

3. Dah jumpa? Good! Sekarang Copy kod kat bwah ni pula
::-webkit-scrollbar-thumb:vertical {
height:9px;
background-color:#F8E0EC ;
}
::-webkit-scrollbar {
width:8;
height:10px;
background:#FFFFFF;
margin-right:5px;
}

4. Then, korang pastekan di bawah kod step ke 2 tadi. Korang paste selepas penutup body " } ". Contoh korang paste macam ni :
body {
anak-anak kod
}
::-webkit-scrollbar-thumb:vertical {
height:10px;
background-color:#F8E0EC ;
}
::-webkit-scrollbar {
width:3;
height:10px;
background:#FFFFFF;
margin-right:5px;
}

Pink : Warna scroll bar
Biru :Warna background scroll bar

Boleh pilih warna di SINI

5. Klik preview dahulu, kalau takde error boleh Save template!^^


p/s: happy blogging! *scroll bar berwarna hanya menjadi pada pengguna google chrome sahaja