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


SMS: Send FOLLOW R_E_T_B To 40404 For Free - EMAIL: REALITYTECHSBLOG@GMAIL.COM
prexblog notifications

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

Wednesday, 25 April 2018

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.
how-to-edit-template-in-blogger

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



]]></b:skin>

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

Style 1: 

customized-scrollbar-style-1-blogger
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:


customized-scrollbar-style-2-blogger
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;

}



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


]]></b:skin>

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!



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.




No comments:

Post a Comment

Realitytech