Change the look of Scrollbar to Blogger

Changing the look of the Blogger slider bar in this post will help you improve the appearance of the Scrollbar slider. Currently, it only works in web browsers like Opera, Chrome, and Safari. Unfortunately, it does not work on firefox and IE. Because adding us completely depends on Css and you can easily adjust it like colors, widths, and lengths

PREVIEW
Explanation of the installation method
1. Log in to your blog
2. Appearance >> Edit HTML
3. Search for ]]></b:skin> and place the shape over it
WHITE SLIDER

body::-webkit-scrollbar {
  width: 8px;
  height: 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;
}

SLIM 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 app button to save the changes and you will have a scrollbar in a new style. Remember that if you use Firefox or Internet Explorer, the method will not work.
Explanation

The elements available for customizing the scroll bar in web browsers are the following:

 
:: - webkit-scrollbar {} / * Slider * / 
:: - webkit-scrollbar-button {} / * Arrows * / 
:: - webkit-scrollbar-thumb {} / * Scroll indicator * / 
:: - webkit-scrollbar-track {} / * Slider container * / 
:: - webkit-scrollbar-track-piece {} / * Slider * / 
:: - webkit-scrollbar-corner {} / * Bottom corner of the scroll bars * / 
:: - webkit-resizer {} / * Scale bar for resizing * /

You just have to use the ones you need for the modifications and it is not necessary to use all the rules however, if you want to know more about them, I recommend an article scroll bars about the scroll bars

If you have any questions, please leave a comment. Respond to all comments and do not forget to share the topic.