This Css3 Webkit will replace the original html scrollbar to customized Css3 Scroll bar
That old days gone this is 3rd generation latest technology make your blog like a professional website, everyone wants to make they template attractive and good look. Now make your blogger template looks beautiful with the help of css3. Today i am going to show how to change your web page scrollbar's color and its design with Css3 Web kit Technique, give your blogger template a proffesionl look and beautiful design , to attract visitor....
Here i have override the Html css code with css3 to change html scrollbar, this css3 webkit feature being added to html by overriding the css code ant it will change old white scrollbar to colored scrollbar and its width, this scrollbar give a beautiful look to your blog/website.
Adding code to Style sheet :
1. Goto > Template > Edit Html >
2. Find below code by pressing crtl + F
]]></b:skin>
After finding this code, Add this css3 code Above
/* Webkit override Scrollbar with CSS3 */
::-webkit-scrollbar {
width: 8px; height:8px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
background:#fff;
}
::-webkit-scrollbar-thumb {
background: rgba(186,35,35,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(186,35,35,0.4);
For Example ::
Your Code Here
]]></b:skin>
Now save your template Done..!!
Note: This trick works only in Mozilla Firefox, google chrome, IE 9 + browsers...!!
Enjoy It...!!
