Tuesday, June 4, 2013

How To Add Custom Scroll Bar For Blogger




How to Add Custom Scroll Bar To Blogger?

Due to introduction of HTML5, many of the websites have been changing their look. All websites are trying to make their appearance superb to attract more visitors. So we have decided to give you CSS code for many type of scrollbar. We have also included the scroll bar which Google uses on Gmail and on all other Google related pages.
All the following code uses web-kit to make your scrollbar very attractive. Also if you notice our website than we also have changed our scroll-bar.


Steps To Add Scroll Bar To Blog

  • Log in to your Blogger Account.
  • Go to Templates >> Edit HTML.
  • Find for <b:skin>...</b:skin> tag.
  • Unfold The <b:skin>...</b:skin> tag.
  • Now Find ]]></b:skin> tag.
  • Paste the below code just below ]]></b:skin> tag.
::-webkit-scrollbar-track-piece{
background-color:#fff;
-webkit-border-radius:0;
}
::-webkit-scrollbar{
width:15px;
height:8px;
}
::-webkit-scrollbar-thumb{
height:20px;
background-color:#cbcbcb;
-webkit-border-radius:4px;
outline:2px solid #fff;
outline-offset:-2px;
border: 0.1px solid #b7b7b7;
}
::-webkit-scrollbar-thumb:hover{
height:50px;
background-color:#909090;
-webkit-border-radius:4px;
}

::-webkit-scrollbar{
width:16px;

No comments:

Post a Comment