Wednesday 1 May 2013

Colour Scroll Bar Style (Updated)


Assalamualaikum semua..Hari ni saya nak buat tutorial tentang scroll bar. Semua dah tahu kan apa itu scroll bar, betul tak? Tutorial ni request daripada wawa. Dia minta buat macam scroll bar saya je tapi saya buat tutorial sampai 3 style sekaligus. Pilihlah yang mana satu yang berkenan di hati.




1. Dashboard --> Template --> Edit Html


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 
ATAScode ]]></b:skin> tadi




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

ABC : Ubah ikut kesesuaian
Code warna di sini :)

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


Credit to : SAMIQA


4 comments :

jeon said...

thanks

Unknown said...

@Alya Aiman you're welcome..

Unknown said...

scroll bar ni mengambil masa ke nk jadi??...maksudnya kalau favicon kena tunggu lama baru dia muncul.jadi scroll bar ni pun sama?

Unknown said...

@nurul aisyah dia terus jadi