Primeiro Tutorial - Barra de rolagem


Vá no seu blog, faça login, depois vá em design, editar HTML, digite Ctrl + f e procure por:  ]]></b:skin>
Quando encontrar esse código, coloque isso logo acima:

::-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+*/
}
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;}


Onde está escrito em roxo é onde você deve colocar a cor desejada pra a cor da barra, onde na imagem está rosa.

Onde está escrito em azul, você deve colocar a cor desejada para a cor da borda, onde na imagem está branca.

Onde está escrito em rosa (fundo da barra de rolagem), você deve colocar a url de uma imagem para usar de fundo na barra, mas eu usei uma cor, lilás, como dá pra ver na imagem. Se você também quiser colocar só uma imagem, retire do código a parte 
url(fundo da barra de rolagem) e coloque o código da cor desejada!

Obrigado ao blog Vivislandia pelo tuto, foi muito melhor do quê os outros que eu achei

Consegui achar uma tabela de cores para vocês usarem pra achar o código das cores, basta colocar a cor que você quer e copiar o código dela que vai aparecer logo ao lado:

Um comentário:

  1. Olá linda tá tendo vagas para postadoras?gostaria muito de postar aqui! obg

    ResponderExcluir