Tutorial: Barra de rolagem colorida

Oi bebês tudo bem? A pedido da leitora Mury irei fazer um tutorial ensinando a colocar barra de rolagem colorida

Dê ctrl + f e procure por ]]></b:skin>.

Cole acima de ]]></b:skin> o seguinte código:

::-webkit-scrollbar-thumb:vertical {

background: #e7b3c2;

height:50px;

border: 2px solid #fff;

box-shadow: 2px 2px 4px #bebdbd;

-moz-box-shadow: 2px 2px 4px #bebdbd;

-webkit-box-shadow: 2px 2px 4px #bebdbd;

-khtml-box-shadow: 2px 2px 4px #bebdbd;

-moz-border-radius: 10px; /* Para Firefox */

-webkit-border-radius: 10px; /*Para Safari e Chrome */

border-radius: 10px; /* Para Opera 10.5+*/

}

::-webkit-scrollbar-thumb:horizontal {

background-color:#f26d92; height:10px;

border: 1px dashed #fff;

-webkit-box-shadow:0 0 1em #eee; }

::-webkit-scrollbar {height:10px; width:20px; background: url(FUNDO DA BARRA DE ROLAGEM) repeat;

box-shadow: -3px -2px 10px #bebdbd;

-moz-box-shadow: -3px -2px 10px #bebdbd;

-webkit-box-shadow: -3px -2px 10px #bebdbd;

-khtml-box-shadow: -3px -2px 10px #bebdbd;}

 Obs: O código destacado de Azul se refere a cor da Barra de rolagem.
 Obs: O código destacado de Laranja se refere a borda da barra de rolagem. 
 Obs: O nome destacado de Verde se refere ao fundo da barra de rolagem.

Agora é só salvar e ver se está tudo certo. Se vc quiser que não apareça o fundo da barra de rolagem, faça como eu: copie o URL do seu background e cole em "fundo da barra de rolagem".

Espero que o tutorial tenha sido útil. Qualquer dúvida comente. Bjs :*