24 de nov de 2012

Meta Concluída + Barra de Rolagem Colorida


Hey Pessoinhas, completamos mais uma meta, já temos 61 seguidores, agora vamos partir para os 70.
Hoje vou ensinar como colocar no blog uma barra de rolagem personalizada no seu blog.


Veja o exemplo:


Vá Em Design> Editar HTML e procure por:
]]></b:skin>
E acima dele 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;}

Vamos Personalizar:
 O código #e7b3c2 é a cor da barra de rolagem.
O código #fff é a borda da barra de rolagem.
E onde está escrito FUNDO DA BARRA DE ROLAGEM é o ulr do background
Você pode consultar a tabela de cores aqui.

Agora é só ver se deu tudo certo, salvar e pronto, Beijinhos.


Um comentário: