Como colocar barra de rolagem personalizada

Hey baby's! 

Trago pra vocês um post que pode ser ou não um post de boa utilidade, como colocar a barra de rolagem personalizada. Como vocês podem conferir na imagem abaixo (créditos: Tudy Teen):

Vamos começar?!

Vá em Modelo > Editar HTML > Marque a opção "Expandir Modelos de Widgets" > Aperte Ctrl + F e procure por:

]]></b:skin>

Depois de achar cole ACIMA o seguinte código:

::-webkit-scrollbar {width: 12px; height: 4px; background: #3434; }

::-webkit-scrollbar-thumb { background: #ff004d; }

*{

scrollbar-face-color:#ff004d;

scrollbar-highlight-color:#ff004d;

scrollbar-3dlight-color:#343434;

scrollbar-darkshadow-color:#343434;

scrollbar-shadow-color:#ff004d;

scrollbar-arrow-color:#343434;

scrollbar-track-color:#343434;

}

Apos fazer isso, troque as partes em vermelho para a cor do botão que você quer e as partes em roxo para a cor que você quer no fundo da barra.  Para fazer a troca é só copiar o "Código HTML" da cor escolhida nessa Tabela de Cores.