Tutorial: Customize Scroll Bar

| On
4:51:00 PM

ok, hari nie Amni nak ajar macam mana nak bagi scroll bar korang jd cantik mcm Amni pnya blog nieh..

korang tahu ka apa itu scroll bar

kalu x tau meh sini nak tunjuk..

*abaikan banner Amni tuh ^_^
ha! yg Amni tunjuk tu la.. nak buat macam tu tak? kalu nak, jom kita mulakan..

tp, tutorial nie hanya untuk pengguna Google Chrome saja tau siapa yg guna Mozilla, taun depan pon tak akan benda alah tu.. jadi, mmg la jadi, but tak akan muncul..nnti menangis plak dpn lappy korang tuh..

now, we start!

1. Log in > Dashboard > Design > Edit HTML
2. Tekan Ctrl+F dan cari kod nie..
]]></b:skin>

3. Then, copy code bawah nie and paste sebelum ]]></b:skin> tadi.

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




Yang Amni bg nie, scrollbar Amni tau! 
* warna oren tu, warna background scroll tu, kalu nak tukar warna boleh pilih di sini.
* warna merah tu pula, code benda yang scroll tu, ala..yg bergerak gerak tu la..
Amni pnya berwarna.. tp, kalu korang nak tukar kepada yg ada gambar.. korang tukarkan code yg kaler merah tu, kepada code nie:

background-image:url(URL BACKGROUND YG KORANG SUKA);
 yang wrna hijau tu pula, korang boleh tukar kepada background yg korang suka..korang juga boleh pilih background tu di ruang freebies Amni 

ok, nie pulak, kpd yg nak letak border.. korang boleh add code di bawah nie:

border: 1px solid #000000;
4. Dah siap! Preview dulu.. kalau dah berpuas hati baru save..

p/s: kalau tak menjadi tu, korang jgn gelisah pula, dye mmg lambat skit.. Amni pnya mcm tu jga, keesokkan baru nak jd.. maybe, dye depends on korang punya blog, so, Be Patient. Ingat!, pengguna Google Chrome shj.. 

6 comments on "Tutorial: Customize Scroll Bar"
  1. rajen jer buat tutorial kan..thanks..nanti nak try jugak buat..nice blog

    ReplyDelete
  2. @haNem hahha, aktiviti msa terluang, try la. nice blog too :)

    ReplyDelete