1. Log in to your blog
2. Appearance >> Edit HTML
3. Find ]]></b:skin> and place the shape over it
white slider
body::-webkit-scrollbar {
width: 8px;
}
body::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
background-color: #dfdfdf;
border-radius: 10px;
}
slender slider
body::-webkit-scrollbar {
width: 5px;
}
body::-webkit-scrollbar-track {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
background-color: #11171a;
border-radius: 10px;
}
black slider
body::-webkit-scrollbar {
width: 10px;
}
body::-webkit-scrollbar-track {
background-color: transparent;
border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 10px;
}
orange slider
body::-webkit-scrollbar {
width: 12px;
}
body::-webkit-scrollbar-track {
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.4);
}
body::-webkit-scrollbar-thumb {
background-color: #e78632;
background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.3) 20%,transparent 20%,transparent 40%,rgba(255, 255, 255, 0.3) 40%,rgba(255,255,255,.3) 60%,transparent 60%,transparent 80%,rgba(255, 255, 255, 0.3) 80%);
border-radius: 10px;
}
Galaxy slider
body::-webkit-scrollbar {
width: 15px;
}
body::-webkit-scrollbar-track {
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.1);
}
body::-webkit-scrollbar-thumb {
background-image: linear-gradient(45deg, #00aeff, #a68eff);
border-radius: 10px;
-webkit-box-shadow: rgba(0,0,0,.12) 0 3px 13px 1px;
}
green slider
body::-webkit-scrollbar {
width: 12px;
}
body::-webkit-scrollbar-track {
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.4);
}
body::-webkit-scrollbar-thumb {
background-color: #aab74d;
background-image:-webkit-linear-gradient(rgba(255,255,255,.3) 20%,transparent 20%,transparent 40%,rgba(255, 255, 255, 0.3) 40%,rgba(255,255,255,.3) 60%,transparent 60%,transparent 80%,rgba(255, 255, 255, 0.3) 80%);
border-radius: 10px;
}
Press the apply button to save the changes and you will have a new style scrollbar. Remember that if you are using Firefox or Internet Explorer, this method will not work.
The items available for customizing the scroll bar in web browsers are the following:
:: - webkit-scrollbar {} / * Slider* /
:: - webkit-scrollbar-button {} / *arrows* /
:: - webkit-scrollbar-thumb {} / * scroll cursor* /
:: - webkit-scrollbar-track {} / * slider container* /
:: - webkit-scrollbar-track-piece {} / * Slider* /
:: - webkit-scrollbar-corner {} / * Bottom corner of the scroll bars* /
:: - webkit-resizer {} / * Drag bar to resize* /
You only have to use the ones you need for the adjustments and you don't have to use all the rules However, if you want to know more about them I recommend the scroll bars article about scroll bars
If you have any questions, please leave a comment, reply to all comments and do not forget to share the topic.