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:
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! =)
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:
Postar um comentário