Blogger4Ever

Have you ever thought about How some people have Customized Scrollbar in their Blogs and Sites? Do you also want to customize blogger scrollbar and make your blog more eye-catchy, elegant, and professional?

Do you want to give your blogger website elegant and professional look by adding custom-designed scroll bar? Adding custom Scroll bar in blogger blog will give a elegant and professional look and you can change the color with your brand color. In this tutorial, I will show you how to replace/change default scrollbar with custom Scroll Bar in Blogger blogs Using Css.


Every browser's default scrollbar color is gray which is customizable through CSS. You can easily customize scrollbar by changing its width, height, track color, thumb color, thumb hover color, and color of thumb when it is active (Someone clicks on it.). To do so, you’ve to use CSS style sheet coding inside your blogger template.

How To Customize Scrollbar in Blogger Blog?

This is a basic CSS Code that you can use to modify the look of the scroll bar.

/* Width */
::-webkit-scrollbar {
  width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* Thumb */
::-webkit-scrollbar-thumb {
  background: #888;
}
/* Thumb on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

1st Code Change width of scrollbar and the Second code Change background color of scrollbar track and 3rd and 4th code, you can change the Scroll bar thumb color and thumb hover color.

How To Add Customize Scrollbar in Blogger Blog?

1. Login To Blogger >> Select Blog.
2. On Left Side of Blogger Dashboard find Theme >> Click on the three vertical dots >> Edit HTML.
3. Click anywhere inside code area and Press Ctrl+F search for ]]></b:skin> just after it paste the below customized Scrollbar CSS Code of your choice and click Save Template..

Customized Blogger Scrollbars

Style #1 – Customized Blogger Scrollbar

<style type='text/css'>
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #000000;
}
</style>

Style #2 – Customized Blogger Scrollbar

<style type='text/css'>
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #000000;
}
::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
background-color: #FF0000;
}
</style>

Style #3 – Customized Blogger Scrollbar

<style type='text/css'>
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
border-radius: 10px;
}
::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
border-radius: 10px;
background:#c9d5ea;
background:linear-gradient(135deg,#000000 0,#FF0000 50%,#FFFF00 50%,#000000 100%);
}
</style>

Style #4 – Customized Blogger Scrollbar

<style type='text/css'>
::-webkit-scrollbar-track{
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
background:#fff 0% 0% repeat scroll;
}
::-webkit-scrollbar{
width:12px;
background-color:#FFF
}
::-webkit-scrollbar-thumb{
background-color:#00ACF5;
background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent)
}
::-webkit-scrollbar-thumb:hover{
background:#008BC5;
}
::-webkit-scrollbar-thumb:active{
background:#00ACF5;
-webkit-box-shadow:inset 1px 1px 2px rgba(0,0,0,.3)
}
</style>

Style #5 – Customized Blogger Scrollbar

<style type='text/css'>
:-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
background-color: #F90;  background-image: -webkit-linear-gradient(45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent)
}
</style>

Style #6 – Customized Blogger Scrollbar

<style type='text/css'>
::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%,
color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.5, transparent), to(transparent));
}
::-webkit-scrollbar-thumb:hover{
background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%,
color-stop(.5, transparent), to(transparent));
}
</style>

Style #7 – Customized Blogger Scrollbar

<style type='text/css'>
::-webkit-scrollbar {
width:12px;
height:8px;
}
::-webkit-scrollbar-track {
background:#111;
background:linear-gradient(135deg,#111 0,#444 50%,#444 50%,#111 100%);
-webkit-box-shadow:inset 1px 1px 2px #E0E0E0;
border:1px solid #D8D8D8;
}
::-webkit-scrollbar-thumb {
background:#c9d5ea;background:linear-gradient(135deg,#d3416f 0,#6217ed 50%,#6217ed 50%,#d3416f 100%);
-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);
background:#c9d5ea;background:linear-gradient(135deg,#6f9ded 0,#d3416f 50%,#d3416f 50%,#6f9ded 100%);
}
::-webkit-scrollbar-thumb:active {
background:#c9d5ea;
background:linear-gradient(135deg,#6f9ded 0,#d3416f 50%,#d3416f 50%,#6f9ded 100%);
-webkit-box-shadow:inset 1px 1px 2px rgba(0,0,0,0.4);
}
</style>

Hope this Tutoial will help you how to Install Custom Scrollbar in Blogger using CSS. If you have any doubt regarding the Adding Custom Scroll in Blogger blogs you can ask me in the comment section.

You might also like: How To Add Hreflang (Language) Tags In Blogger
How To Add Keyboard Keys Effect In Blogger Blogspot
How To Add Lazy Load Images In Blogger To Improve Page Speed