Bara de Rolagem Personalizada 2

Heey, já viram o layout Cherry Bomb? Não tem uma barra de rolagem personalizada redondinha? Então, hoje estou trazendo um tutorial de como colocar essa barra de rolagem em seu blog. Bom, eu já tinha ensinado a colocar barra de rolagem personalizada a algum tempo, mas essa é diferente. Tem de dois tipos, a quadradinha, que eu ensinei a algum tempo aqui nesse post, e a redondinha, que eu vou ensinar agora. Recomendo usar a quadradinha se o layout do seu blog for mais simples. Bom, vamos ao tutorial. Clique em continue lendo.

Vá em Modelo >> Editar HTML >> Caixinha de busca (Ctrl+F) >> Pesquise por:

]]></b:skin>

Logo ACIMA da tag, cole 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;}

Colou? Bom, não salve ainda, temos que editar algumas coisas. Onde está destacado de roxo, é a cor da barrinha. (Aquela que se movimenta) A parte destacada em verde, é a cor da borda. E a parte destacada em azul, é o fundo.

Aqui nós temos algumas coisas que podem ser úteis:

-Gerador de cores HTML
-Backgrounds

Visualize e veja se deu certo. Salve.

Espero ter ajudado

Bye Bye