You must enable Javascript in your browser to run or open this site.


do not know how?
  1. Click Here for Firefox user!

  2. Click Here for Google Chrome user!
CSS
Art
32a
Home About facebook google+ Twitter Follow 404 page
Post

-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
  1. Open blogger.com and login
  2. Now choose your blog and click template tab
  3. For safety, backup your template
  4. Click edit HTML and then click proceed
  5. Search (CTRL+F) this code
    ]]></b:skin>
  6. 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



5 COMMENTS

  1. I put this on my blog and when i go for the preview, the whole text code shows at the topmost in written text form

    ReplyDelete

What do you think about this post?
Want send a feedback? or ask something?

you can tell something by commenting.....

Comment Rules
No Spam
Only about this post, no OOT
No live link, backlink, comment will deleted if do that

Welcome
To
Damar's
Blog
NEW!
Return
Reborn
Cyberqpale by Damar Zaky ©2012
Host