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 fed 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 scrollbar colour in the following way:

How To Change Blogger Blog Scroll Bar Colour By Using CSS

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 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.

The Author

Dr. Sujon Paul

Hello! I am Dr. Sujon Paul. I am professionally a doctor, but love to write blogs and update SUJONHERA.COM regularly with fresh contents. Thank you for visiting SUJONHERA.COM. Contact me on Facebook, Twitter & Google Plus. Don't forget to subscribe SUJONHERA.COM on Facebook, Twitter & Google Plus.

Leave a Reply

Type your comment, your name and email address in the below boxes. Then click on the Post Comment button. Your email address is required, but will not be published.

    SUJONHERA.COM © 2012-2016 | About | Contact | Sitemap | Disclaimer | Privacy Policy | Copyright Plocy | Terms and Conditions
    Shares