How to Customize Scrollbars in Blogger using CSS

Scrollbars as you might see in every website is used to navigate and slide to other website content faster way, well you can click and drag the scrollbar and slide to the end of the website. But in all websites one thing is common that scrollbar is same and is boring. So now you can change the look of your scrollbar easily and make it dazzle with colors and anything you like using the awesome CSS language.

As you can see in the above image, I have changed the default scrollbars on chrome to look something bit awkward but colorful theme, yes you can change it to any color and be more creative with extensive CSS knowledge.

• Add some Styles Customize Ordered List ol li using CSS
• How to Host CSS - JavaScript - HTML Files on Google Drive
• Compress CSS Styles Online and Reduce Blog Loading Time

Customize Scrollbars in your Blogger Blog using CSS

Now as this is done using CSS, no heavy scripts are added to get the desired effect, simply add background colors, border and anything in CSS and customize the scrollbars easily.

1. Open Blogger > Template > Edit HTML.
2. Press Ctrl + F and search for ]]></b:skin> tag or </style>(if you have removed default CSS from blogger) and paste below code above the code you have searched.

   ::-webkit-scrollbar{height:14px;width:14px;background:#eee;border-left:1px solid #ddd}::-webkit-scrollbar-thumb{background:#ddd;border:1px solid #ccc}::-webkit-scrollbar-thumb:hover{border:1px solid #bbb}::-webkit-scrollbar-thumb:active{background:#ccc;border:1px solid #aaa}

3. So now comes the editing part, in the above code there are 4 CSS styles that could be changed.
4. The blue code is the full bar you see when you open any site, you can change the background color, add some thick border.
5. Then there is the thumb that is in RED color, you can change its color and add border and add border radius and whatever.
6. Then there are hover and active styles for the thumb that will get active when you hover over thumb and click it.

---

So now you need some basic CSS knowledge to do these changes, well in case you want me to do some styling for you, then you can comment below with your blog link, I would be happy to help you out in designing you blog to awesomeness.