How to Customize Blogger Scroll Bar + 5 Available Styles

Is Scroll Bar on a Blogger blog customizable? Yup! It's customizable. Or, in other words, you can change the default scroll bar form to customized color and form scroll bar. 

How to Customize Blogger Scroll Bar

Scroll Bar customized using CSS. Well, again, we are gonna playing around CSS and HTML codes.

Now, follow these steps to customize your blogger scroll bar.

1. Go to your Blogger Dashboard.

2. Open the Template page and click Edit HTML.

3. Click on the Editor to make it focus and press CTRL + F to show the search box at the top-right.

4. Search for ]]></b:skin> (Type then press enter).

5. Once you've found the ]]></b:skin>, put the code below right before ]]></b:skin>.

::-webkit-scrollbar {

background-color: your color;

}

::-webkit-scrollbar-thumb {

border-radius: 15px;

background-color: your color;

}

Explanation

::-webkit-scrollbar {

background-color: your color;

}

The code above customizes the back of the scroll bar. The background-color is a CSS attribute that changes the color of the scroll bar background. Don't forget to change it with with a color you want. In addition, you can give other CSS attributes just like width size and border.

::-webkit-scrollbar-thumb {

border-radius: 15px;
background-color: your color;

}

The code above customizes the scroll bar thumb or the little scroll bar. The border-radius gives rounded corners (click here for more). And the background-color changes the color of the scroll bar thumb. Change them to the value you want.

6. Click 'Save template'.

Now refresh your blog and enjoy a unique and attractive scroll bar! Everyone who visits your blog should see it too, but, it depends on their browser. Therefore, if you don't see any changes, your browser may not supports the webkit element.

5 Available Scroll Bar Styles

Please visit our another article here for the scroll bar styles.