quarta-feira, 10 de julho de 2013

Tutorial - Barra de Rolagem Colorida

Oiie gente ^^. Eu sou a Nathália Gomes dona do Blog Tutoriais.Com. Pra começo de história eu vou dar alguns avisos. E eles são:

- Todos os tutoriais dados aqui, são exclusivamente para o BLOGGER.
- Se for retirar algum tutorial do Tutoriais.Com, coloque os créditos ou considerarei plágio.
- Eu usarei diversos programas pra fazer os tutoriais e os mais confusos serão em VÍDEO.
- Todos os tutoriais foram feitos por mim, não plagiei de nenhum blog/fórum/site ou qualquer outro.

E são somente esses quatro. E agora eu farei um tutorial de como deixar a barra de rolagem colorida. E como esse é fácil não será em vídeo. Será escrito mesmo.

1- Vá em: Designer > Editar HTML > Clique em qualquer parte do HTML > Aperte CTRL F ou F3.
2- E depois, na barrinha que aparecer procure por: ]]></b:skin>
3- Depois que achar, cole esse código ACIMA:
::-webkit-scrollbar {width: 12px; height: 4px; background: #343434; }
::-webkit-scrollbar-thumb { background: #ff004d; }
*{
scrollbar-face-color:#ff004d;
scrollbar-highlight-color:#ff004d;
scrollbar-3dlight-color:#343434;
scrollbar-darkshadow-color:#343434;
scrollbar-shadow-color:#ff004d;
scrollbar-arrow-color:#343434;
scrollbar-track-color:#343434;

}

Você pode mudar as cores mas... Elas terão de ser com o código HTML, se quiser mudar clique aqui. Antes de concluir a ação, visualize se der tudo certo, salve. E só pra constar, normalmente só visualiza se for no Google Chrome, Internet Explorer ou Safari. Eu nunca testei no Mozilla Firefox.

E quanto ao código no ::-webkit-scrollbar {width: 12px; height: 4px; background: #343434; } é indicado que você mude o width e o height de 12/4 para 5, se quiser que ambos fiquem fininhos, se deixar 12 vai ficar grosso. Width é a barra de cima e height a barra de baixo.

Fica a dica, beijos, e façam bom proveito do tutorial.

Nenhum comentário:

Postar um comentário