How To Change Blogger Blog Scroll Bar Colour By Using CSS

Blogger blogs are highly customizable by many means. You can get a fully different look of your blogger blog by using different templates. You can also change the colour of your blog and add various widgets to get a more attractive look. You can also change the colour of the scroll bar of your blog. Yes, we are fade up watching the same colour scroll bar in all websites. Now you can give your blog visitors a fresh look of your blog by editing the HTML code a little. You can change the scroll bar colour in the following way:

DEMO:
Click here to see the live demo of this effect.

STEPS:
1. At first, log in to your blogger dashboard.
2. Go to Template>Edit HTML.
3. Now look for the following line <b:skin> by using the find option [ctrl+F].
4. You will get the line as follows. click on the pin mark beside the line to expand the code.

5. Now search for the following line ]]></b:skin> by using the find option [ctrl+F].
6. You will get the line easily. Now copy-paste the following code before that line.

/*Tech-tips247.blogspot.com BLOGGER SCROLLBAR*/
::-webkit-scrollbar {
background:#fff;
width:10px;
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
background-image: -webkit-linear-gradient(top, #2c9dd 10%, #2c9dd4 51%);
}
::-webkit-scrollbar-track {
}

7. It will look like this. Now save your HTML template.


Now look at your blog. You will see the change in colour of the scroll bar. You can change the colour code and choose your desired colour. Change the red portion of the code for this.

Thank you for reading this post.