Customize Scrollbar In Blogger

Socialize It →

Tweet

Hi there! I welcome you to yet another Blogger tutorial by Coding Bot. In our last tutorial, we discussed how can you customize the text highlighting color from the default blue to something different of your choice. This website has a different color as you can also check yourself by selecting anything on this page ;)

So today I will share how can you customize the scrollbar of your website. Most of the websites come with a default scrollbar, that is kind of gloomy and boring. Kind of like this one:

So why not change this gloomy scrollbar to something more creative and good looking for your website. 


How To Customize Scrollbar In Blogger:

1. Login to blogger
2. In the left nav, click on Theme -> Edit HTML
3. Search ]]></b:skin> and paste the following lines of code just before it.

/*--------- Scrollbar Customization by CODINGBOT.NET--------- */

::-webkit-scrollbar {
width:9px;
height:9px;
}

::-webkit-scrollbar-track {
background:#FFF;  /*------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);
}

The comments are pretty much self explanatory. To change the scrollbar's height or width, you can adjust it in the first part of the CSS. Similarly the background color can be changed, the thumb color, similarly other parts may be customized according to your own needs.

Make sure that you comment below if this post helped you. I'll keep on sharing more such Blogger tips and posts with you, because what's a better way to learn something new than teaching it yourself?

Adios till then :)

Do you like this post? Please link back to this article by copying one of the codes below.

URL: http://www.codingbot.net/2017/03/customize-scrollbar-in-blogger.html HTML link code: <a href="http://www.codingbot.net/2017/03/customize-scrollbar-in-blogger.html">Customize Scrollbar In Blogger</a> Forum link code: [url=http://www.codingbot.net/2017/03/customize-scrollbar-in-blogger.html]Customize Scrollbar In Blogger[/url]