Sunday 11 November 2012

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...

::-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...
::-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...
::-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...
::-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 ^^......

8 comments: