Barra de rolagem personalizada

Olá pesoas, hoje eu vou ensinar como colocar uma barra de rolagem! Olha mais ou menos como vai ficar:

 Lembrando que as cores são personalizáveis! 

Vá em editar HTML dê um ctrl  f (command f)  e na barra de pesquisa que apareceu procure por:

]]></b:skin>

Esse código vai aparecer destacado ANTES dele cole o código abaixo: 

::-webkit-scrollbar-thumb:vertical {
background: #FF69B4; *mude para a cor que você queira*
height:50px;
border: 2px solid #FFFFFF;
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 #beFbdbd;
-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(URL DO BACKGROUND FIXO) repeat; *url da imagem de fundo*
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;}
}

 No 1° trecho destacado de vermelho você pode trocar pela cor que te agrada (clique aqui para ver uma tabela de cores). No 2° trecho destacado de vermelho coloque a URL do seu background (o fundo da barra de rolagem).

Visualize se estiver tudo ok salve! 

Créditos: Is Jackie Dream