Scrollbar change in blogger

Change the look of the scrollbar in blogger In this post I will help you to improve the appearance of the scrollbar, at the moment it only works in web browsers such as Opera, Chrome and Safari, unfortunately it does not work on Firefox and IE. Because our addon depends entirely on Css, and you can easily modify it, such as colors, widths, lengths

Preview

Explain how to install
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.

Interpretation
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.