Change Scrollbar Color Acoording To Your Theme - Blogger

This post will guide you in improving the looks and feel of scrollbar to match your blog design. Scrollbar can be customized easily by adding CSS. These codes works for every type of website and blogs.

How To Change ScrollBar Color In Blogger ?

Step 1: Go to Theme>edit HTML.

Step 2: Search for ]]>< using Ctrl+F.

Step 3: Add below codes just above it and save theme.

<!--Width of scrollbar -->
::-webkit-scrollbar {
width:10px;
}
<!-- background track color of scrollbar -->
::-webkit-scrollbar-track {
background:#dddddd;
}
<!-- color of scrollbar -->
::-webkit-scrollbar-thumb {
background:#8c8c8c;
}
<!-- color of scrollbar on hover or mouse over -->
::-webkit-scrollbar-thumb:hover {
background:#1E90FF;
}
<!-- color of scrollbar when active or clicked -->
::-webkit-scrollbar-thumb:active {
background:#1E90FF;
}
<!-- color of sides of scroll bar  -->
::-webkit-scrollbar-button {
background-color: #dddddd;
}

 Customization: 

• Change blue background text value to change width of Scrollbar.
• Change green background html color value to change Track color of Scrollbar.
• Change red background html color value to change thumb color for normal, hover and active class.
• Change yellow background html color value to change side-buttons color of Scrollbar.