How To Change Blogger Blog Scroll Bar Colour By Using CSS

Blogger blogs are highly customizable by any means. You can get a fully different look of your Blogger blog by using different templates. You can also change the color of your blog and add various widgets to get a more attractive look. You can also change the color of the scroll bar of your blog. Yes, we are fed up watching the same color 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 scrollbar color 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.

How To Change Blogger Blog Scroll Bar Colour By Using CSS

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.

/*SUJONHERA.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.

How To Change Blogger Blog Scroll Bar Colour By Using CSS

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

Thank you for reading this post.

About Dr. Sujon Paul 813 Articles
The author of this post is Dr. Sujon Paul, an MBBS Doctor. He is also a blogger and updates this website [MAXBANGLA.COM] regularly with fresh contents. Thank you for visiting this website. Contact Author: Facebook, Twitter & Google Plus

Be the first to comment

Leave a Reply

Your email address will not be published.


*