How to customize your scroll bar and text color on blogger

Have you ever had the intention of changing your blog text color ,the width of your blog or the scroll bar of your blog specifically on blogger?. You can see a perfect example on our blog using your PC. We customized the scrow bar in which you can also do the same easily without any issue. Surely, you can also do the same. It makes your blog more colourful and more professional. So on this post customizing our scroll bar would be what we would be dealing with. Follow our steps carefully and you wouldn't encounter any issue at all.

Read also:How to fix page not found on blogger

Steps in customizing your scroll bar

I hope you're aware that the default scroll bar color for almost all browser is grey in which you can change the height, width and the scroll bar track bar track color scroll color when active thumb over and color. In customizing all this we would be making use of CSS (cascading style sheet) so let's get started.

• Firstly, login to your blogger dashboard
• Go to theme. And back up your template to enable you undo mistakes in case you make any.
• Click on Edit html.
• Click any where in the code arena and press CNTRL+F to enable search.
• Now type in ]]></b:skin> and press enter.
• Then paste the script below just above this code ]]></b:skin>.

 /*--------- Scrollbar Customization code--------- */
::-webkit-scrollbar {
width:8px;
height:8px;
}
::-webkit-scrollbar-track {
background:#FFF;  /*------This is background color of scrollbar track ------*/
-webkit-box-shadow:inset 1px 1px 2px #E0E0E0;
border:1px solid #D8D8D8;

}

::-webkit-scrollbar-thumb {

background:#c0392b;  /*------Thumb color ------*/
-webkit-box-shadow:inset 1px 1px 2px rgba(155,155,155,0.4);
}
::-webkit-scrollbar-thumb:hover {
-webkit-box-shadow:inset 1px 1px 10px rgba(0,0,0,0.4); /*------Shadow on hover------*/
}
::-webkit-scrollbar-thumb:active {
background:#333;   /*------Thumb color when it is active------*/
-webkit-box-shadow:inset 1px 1px 2px rgba(0,0,0,0.4);
}

• Through with that? If yes click on save.

Read also: How to make your blog visible on Google, yahoo and bing search engine

Customizing text color.

Customizing text color simply means when someone highlights a text on your blog. The color it changes to is what we would be customizing here.

Just like the previous locate  ]]></b:skin> paste the code below.

/*--------- Text selection Customization code------------- */
::selection {
background:#e67e22; /*------background color on selection-----*/
color:#fff; /*------text color on selection-----*/
}
::-moz-selection {
background:#e67e22; 
color:#fff
}
::-webkit-selection {
background:#e67e22;
color:#fff
}

You can change the colors to the one that suites your blog and press save.
You've just changed your scrow bar and highlighted text color. Encounter y issue? Did it work for you kindly male effort by dropping your comment. Kindly subscribe to our blog not to miss our update.