How To Change The Colour Of Your Blog' s Scroll Bar

Today Am going to give a tutorial on How To Change The Colour Of Your Blog' s Scroll Bar, you may decide to change the colour of your blog scroll bar because of many reasons maybe because it is not the same with the color of your blog. So the solution is here now.

Follow All Steps Below To Change The Color Of Your Blog's Scroll Bar

Step 1: Go to blogger dashboard, navigate to template and edit html.

Step 2: Click inside the code and search for below piece of code:

]]>

Step 3: Choose a customized scrollbar and copy its code.

Style 1:

body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
body::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
body::-webkit-scrollbar-thumb{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #ccc;
}

Style 2:

body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
body::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
body::-webkit-scrollbar-thumb {
border-radius: 0px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #35BB6E;

}

Style 3:

body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
body::-webkit-scrollbar {
width: 14px;
background-color: #ffffff;
}
body::-webkit-scrollbar-thumb {
border-radius: 5px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #3993E2;
}

Step 4: Paste it above the below piece of code.

]]>

Step 5: Click on save template and you are done.

Custom Style:

You can make a custom scrollbar too by making changes according to your needs in highlighted fields above. Read explanation of each code function below:

Color of scroll bar:

To change color of your scrollbar replace #3993E2 with your chosen color code in background-color: #3993E2; in the third style.

Edges of Scroll bar:

To change radius of edges of your scroll bar make changes in border-radius: 5px; in the third style.

Background color of scrollbar:

To change background color of your scroll bar make changes in background-color: #ffffff; in the third style

How to get code of a color? Click here to use color code generator!

Read Also:-

How To Add HTML Table In Blogger Posts

Is it helpful??? did you encounter any problem when doing this, dont hesitate to contact us and also dont forget to share this to friends and family.

Exclusive to Mr Olumide's Blog