Four Scrollbar style

Assalamualaikum...blog saya dah bertukar wajah ( lagi =,= )...hehe... kali ni saya nak bagi jenis-jenis scrollbar yang boleh digunakan silalah guna...

Note : This scrollbar only work in chrome and safari browser...

Firstly :

For blogskin Search  </style> using ctrl+f  or f3 and search  ]]></b:skin> if you're using template designer..

Blogskins / Classic template : Paste the codes before / above  </style>

Template designer : Paste the codes before / above  ]]></b:skin>

Style no.1...

DEMO ...

::-webkit-scrollbar {
width: 15px;
height: 15px;
}
::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment {
height: 15px;
width: 15px;
background: #FFD0DA ;
border: 3px solid #FFFFFF;
-moz-border-radius: 100%;
border-radius: 100%;
}
::-webkit-scrollbar-track-piece {
background-color: #FFD0DA;
border: 7px solid #FFFFFF;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background-color: #FFD0DA;
background-image:url(http://www.dolliehost.com/dolliecrave/backgrounds/yummy/55.gif);
background-size:300%;
}

Style no.2...

DEMO...

::-webkit-scrollbar {

width: 15px;

height: 15px;

}

::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment {

height: 15px;

width: 15px;

background: #FFB4B4;

}

::-webkit-scrollbar-track-piece {

background-color: #D1F7B6;

border: 6px solid #FFFFDF;

}

::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {

background-color: #FFFFFF;

background-image:url(http://www.dolliehost.com/dolliecrave/backgrounds/stripes2/232.gif);

background-size:500%;

background-position:0% 0%;

}

::-webkit-scrollbar-thumb:vertical:hover, ::-webkit-scrollbar-thumb:horizontal:hover {

background-size:100%;

}

Style no.3...

DEMO...

::-webkit-scrollbar {

width: 15px;

height: 15px;

}

::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment {

height: 15px;

width: 15px;

border-radius:10px;

background:url(http://www.dolliehost.com/dolliecrave/backgrounds/plaincolor/71.gif);

border: 2px solid #FFFFD7;

}

::-webkit-scrollbar-track-piece {

background-color: #FFFFD7;

}

::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {

background-color:#FFFFFF;

background-image:url(http://www.dolliehost.com/dolliecrave/backgrounds/plaincolor/71.gif);

border: 3px solid #FFFFD7;

}

Style no.4...

DEMO...

::-webkit-scrollbar {

width: 15px;

height: 15px;

background-color:#FFFFFF;

}

::-webkit-scrollbar-button:end:increment {

background-image:url(http://www.dolliehost.com/dolliecrave/scrollbars/arrowdown.png);

background-repeat: no-repeat;background-position:center;

box-shadow: inset 0 0 2px 1px #DDDDDD;

}

::-webkit-scrollbar-button:start:decrement {

background-image: url(http://www.dolliehost.com/dolliecrave/scrollbars/arrowup.png);

background-repeat: no-repeat;background-position:center;

box-shadow: inset 0 0 2px 1px #DDDDDD;

}

::-webkit-scrollbar-thumb {

background-color:#E5CBFF;

border:0px solid #E5E5E5;

border-radius:0px;

}

::-webkit-scrollbar-track {

background:#FFFFFF;

border-radius:0%;

box-shadow: inset 0 0 2px 1px #DDDDDD;

}

Customize the style :

Blue text : Color code FIND HERE

Orange text : Width and height of the scrollbar

Red text : Background image URL

........PREVIEW AND SAVE IT HAPPILY........

Do comments and never re-post this tutorial

......That's all see you next time ^^......