How To Add A Custom Scroll bar in Blogs using CSS

A Scroll bar is located at the right of the browser. It is a main part of your template designing, it upgrades the look of your template or blog. So it necessary to customize it according to your blog template.  This tutorial is about how we can customize the scroll bar on blogs using css.  Here we need css to add a custom scroll bar on your blog.

Adding A Custom Scroll bar In Blogspot Blogs


Follow the steps below to add a custom scroll bar on your blog-
  • Go To Blogger>Dashboard>Template.
  • Select Edit HTML. 
  • Search For     </b:skin>   and paste the code just above it.


/*-----Custom ScrollBar---*/
::-webkit-scrollbar{width:12px;height:8px}
::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 4px rgba(0,0,0,0.3);background:#ffffff}
::-webkit-scrollbar-thumb{background: rgba(43,22,22,0.8);-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5)}
::-webkit-scrollbar-thumb:window-inactive{background:rgba(43,22,22,0.4)}

  • To change the Height And Width of scroll bar just Change The width:12px;height:8px to your desired number . For Changing The Color Of Scroll Bar just change the rgba(43,22,22,0.8)
  • Now save your Template and Enjoy. 


0 comments:

Post a Comment