Customise scroll bar

Upgraded blogger;


1. Design -> Edit HTML
2. Copy and this code

::-Webkit-scrollbar {
height: 12px;
width: 12px;
background:  #ffffff ;
}
::-Webkit-scrollbar-thumb {
background-Color: #999999 ;
}

3. Paste it above 

]]></b:skin>

Classic blogger; 


1. Template
2. Copy and this code

::-Webkit-scrollbar {
height: 12px;
width: 12px;
background:  #ffffff ;
}
::-Webkit-scrollbar-thumb {
background-Color: #999999 ;
}

3. Paste it under

<style type="text/css"> 

--------------------------------------------------------------------------------------------------------------------


If you want your scroll bar to have rounded corners add

-moz-border-radius: 5px;
border-radius: 5px;

under ::-Webkit-scrollbar-thumb { 

It should look like this :

::-Webkit-scrollbar {
height: 12px;
width: 12px;
background:  #ffffff ;}
::-Webkit-scrollbar-thumb {
-moz-border-radius: 5px;
border-radius: 5px;
background-Color: #999999 ;}

--------------------------------------------------------------------------------------------------------------------

If you want to add border you will have to use this code.  (this would include to all your scroll bars)

::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
height:  12 px;
display: block;
background-color: #999; border:1px solid #ffffff;}::-webkit-scrollbar-track-piece {
background-color:#999;
}
::-webkit-scrollbar-thumb{
background:#ddd;border:1px solid #ffffff;}::webkit-scrollbar-thumb:vertical {
background:#fff);
border: 0px solid #ffffff;
border-right:none;
}
::webkit-scrollbar-thumb:horizontal {
background:#fff;
border: 0px solid #ffffff;
border-bottom;
}

(Red is where you change the colours of the scroll bar)

Colour codes can be copied from here ; http://justanothertutorial.blogspot.co.uk/2011/11/colour-code.html