23 de setembro de 2011

Tutorial-Barra de Rolagem Personalizada

Algumas pessoas me perguntaram como é que faz essa barra de rolagem aí do lado que eu coloquei no blog! O modelo é do blog Cherry Bomb, mas eu vi o tutorial no Ecleticu's, então os créditos vão para ele!

1-Clique em Modelo>Editar HTML. Aperte Ctrl+F e procure por  ]]></b:skin>.
2-Acima desse código, cole ESTE 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;}


3-Agora, vejamos a legenda.


Roxo-Cor da barra.
Vermelho-Cor da borda da barra
Azul-Url do background


4-Veja como personalizar!


Nesta tabela você encontra o código das cores para o texto em roxo e vermelho. Desse jeito: Escolha uma cor, copie o código HTML dela, que aparece logo na frente e substitua o código da cor. (deu para entender?)


Para o texto em azul, ache um background legal para a sua barra, hospede no Image Shack (precisa fazer conta ou login) e copie o link direto da imagem. Cole o link direto no lugar do texto em azul.


Espero ter ajudado! Boa sorte! =)

Nenhum comentário: