- Open blogger.com and login
- Now choose your blog and click template tab
- For safety, backup your template
- Click edit HTML and then click proceed
- Search (CTRL+F) this code
]]></b:skin>
- Copy this code ::-webkit-scrollbar{height:10px;overflow:visible;width:10px} ::-webkit-scrollbar-button{height:0;width:0} ::-webkit-scrollbar-track{background: #f2f2f2; border: none; opacity: 0;} ::-webkit-scrollbar-track:hover{background-color: #f2f2f2;box-shadow:inset 1px 0 0 #d9d9d9} ::-webkit-scrollbar-track:active{background-color:rgba(0,0,0,.05);box-shadow:inset 1px 0 0 #c2c2c2; border-top: 1px solid #c2c2c2;} ::-webkit-scrollbar-thumb{background-color: #c0c0c0;background-clip:padding-box;min-height:10px; max-height:10px; padding:100px 0 0; border-left: 1px solid #9a9a9a; border-top: 1px solid #acacac; border-bottom: 1px solid #acacac;} ::-webkit-scrollbar-thumb:hover{background-color: #909090;box-shadow:inset 1px 0 0 #8a8a8a; border-left: 1px solid #666; border-top: 1px solid #727272; border-bottom: none;} ::-webkit-scrollbar-thumb:active{background-color: #797979; box-shadow:inset 1px 1px 1px #696969;} ::-webkit-scrollbar-corner{background:transparent;} body::-webkit-scrollbar-track {opacity: 0;} body::-webkit-scrollbar{height:12px;overflow:visible;width:12px} body::-webkit-scrollbar-track-piece{border: none; background: #f2f2f2;} body::-webkit-scrollbar-thumb{border-width:1px 1px 1px 1px;margin:0 0 0 1px;} body::-webkit-scrollbar-corner{background-color:#f5f5f5;}and paste before]]></b:skin>tag and then save template
-webkit- scrollbar CSS google style fixed
If you open Gmail in google chrome, you should see the scrollbar color is not normal, why?, because it's use -webkit- style for change the scrollbar. Now i share the code for -webkit- scrollbar with google style and fixed color. This style is just using little CSS and will not make your pagespeed slowly. But this trick only support -webkit- browser, like google chrome or Safari. Not support firefox. But also you can edit this scrollbar color, width or another style yourself.
Just put this Code in your page CSS place, or if you're using blogger like me, follow this instruction below
Tags:
Blogger tutorial,
cool CSS,
CSS,
CSS tutorial,
Info
wow.. thanks :)
ReplyDeletethank you.
ReplyDeleteI put this on my blog and when i go for the preview, the whole text code shows at the topmost in written text form
ReplyDeletekeren bro
ReplyDeletewah makasih infonya sob, manteb CSSnya :D
ReplyDelete