Caso alguma imagem do blog não esteja aparecendo, por favor, avise nos comentários da postagem em questão!

14/11/2011

NOVO: Mudar a cor da seleção

Já viu que a seleção daqui tem uma cor diferente? Não? Selecione só esse primeiro parágrafo para você ver...
O padrão do Blogger é a seleção ser cinza. Tá certo que combina com qualquer template, mas venhamos e convenhamos é meio anti-fashion... Com o código que eu vou colocar a seguir (que é super-simples, tanto que eu já vi ensinando em inúmeros blogs) você vai poder colocar no seu blog a seleção com a cor que você desejar, no fundo e na fonte...
Eu vou ensinar o jeito de colocar pelo Designer do Modelo, se você mexe com o HTML do template, basta colar o código antes de  ]]></b:skin>

Vá no Designer do Modelo, que fica na guia Modelo> Personalizar (o botãozinho laranja abaixo do seu template atual). Ao abrir completamente o Designer do Modelo (tem que aparecer uma visualização do seu template atual abaixo), clique na guia Avançado (última guia) > Adicionar CSS (última opção da lista), vai abrir uma caixa branca onde está escrito em cinza: "Adicionar o CSS aqui para substituir estilos existentes" (a menos que você já tenha colocado algum código, então vai aparecer o código que você colocou, cole o código embaixo dele). Aqui nós vamos colar o seguinte código:


*::-moz-selection {
background: mediumvioletred;
color: white; }

*::selection {
background: mediumvioletred;
color: white; }

O código que coloquei aqui é para as cores iguais as do DSM (rosa com fonte branca). Para mudar a cor do fundo, mude a parte que está em rosa para a cor que você quer no fundo (em Hexadecimal ou em Named Colors), e a que está em negrito para a cor que você deseja na fonte. Por exemplo, se eu quero um fundo preto com a fonte branca, posso colocar o código assim:

*::-moz-selection {
background: black;
color: white; }


*::selection {
background: black;
color: white; }

Ou assim: 

*::-moz-selection {
background: #000000;
color: #FFFFFF; }


*::selection {
background: #000000;
color: #FFFFFF; }

Para ver mais cores, clique neste link para ver uma tabela com as principais cores em Hexadecimal e em Named Colors.

A seleção não vai aparecer na visualização. Então clique em "Aplicar ao Blog", depois vá normalmente no seu blog e selecione qualquer texto para ver se deu certo.

Mil Sweetkisses,
15 Comentários
Comentários

15 comentários:

  1. Opá!! Bom dia!! Gostei da dica excelente!! Alías pra quem não sabe, dá pra fazer isso pelo Blogger, eu só não seie xplicar como, só sei fazer, mais dá tbm. Beijooos e bom feriado!!! ^.^

    ResponderExcluir
  2. Oi fofa *-*

    Parabéns pelo tutorial, e fiquei muito feliz de ver meu blog em cima dos posts!

    Tem post novo no meu blog!

    Bjonas (:

    Fique com Deus <3

    ResponderExcluir
  3. Oi Sheila!
    Otimo tutorial! Certamente ajuda muitas pessoas!
    Ah os personagens de Nsruto estão bombando pela net...e tem cada fan arte lindo! Que eu fico babando! Tem gente que faz uns desenhos que são verdadeiras obras de arte.
    bjs!

    ResponderExcluir
  4. Otima dica, acho que quando tiver tempo vou fazer no meu blog! Acho legal essas coisas diferentes *-*

    Um beijão
    http://fashionvinteum.blogspot.com/

    ResponderExcluir
  5. eu sei fazer isso \o/ aushuash, sobre o comment lá no blog, nossa que patriota hein! nao faria bandeira de outro pais na unha... mais pq n tenta a do Brasil? x)

    ResponderExcluir
  6. Nossa... ficou legal.
    Eu não tenho muita paciência pra essas coisas não... mas acho legal que você faz e ensina como, caso alguém queira...
    Seu blog ta lindo!!!

    http://mmelomaisdomesmo.blogspot.com/2011/11/so-por-hoje.html

    ResponderExcluir
  7. Oiii flor, estou seguindo o seu blog *-*
    Você pode seguir o meu de volta??
    Bjokas :*

    ResponderExcluir
  8. No meu não pega!

    *::-moz-selection {
    background: black;
    color: white; }


    *::selection {
    background: black;
    color: white; }

    Nem com as cores em #****** e nem em ***,***,***
    :(

    ResponderExcluir
  9. Oi , tenho algumas dificuldades ainda , kk!Bom , meu blog ainda num é muito completo , preciso de mais seguidores e não consigo mudar o plano de fundo , mas a matéria ainda valeu mesmo assim!

    ResponderExcluir
  10. Já estou seguindo o seu blog , gostaria que seguisse o meu de volta , ok? Obrigada!

    ResponderExcluir
  11. Amo suas dicas não tem jeitoo... daqui a pouco meu blog vai esta com a cara do teu...kkkkkk

    ResponderExcluir
  12. Oii Sheila,Usei no meu!!Tava procurando esse tutorial faz um tempaaaaaaao Valeu!!
    Ajudou bastante os seus tutoriais!!
    Obrigada por tudo.
    Doriinha♥

    ResponderExcluir
  13. A cada tutorial que acerto, me abaixo mais pelo DSM, porque são muito facéis.
    Obrigada Sheila. Agora eu sou fãaaaaaaaaaaaaaaa

    Ane
    http://diariovirtualdaane.blogspot.com.br/

    ResponderExcluir
  14. Que estranho, o meu quando eu coloco no CTRL+F e colo "]]>" não aparece ):: Oque eu faço??

    ResponderExcluir
    Respostas
    1. Concertando: ].]><./.b:skin> (coloquei os pontos finais para o blog permitir esse comentario)

      Excluir

Related Posts Plugin for WordPress, Blogger...
Posts relacionados