Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Efeitos CSS Vanessa S.

Mudar cores do texto selecionado com mouse

moz-selection

Hoje você vai aprender um código bem simples mas que dá um efeito bem diferente e interessante aos textos selecionados no seu blog.
Com aplicações CSS, é possivel alterar a cor do texto e cor de fundo de um texto quando selecionado com o mouse pelo usuário.
Você pode verificar este efeito aqui no Mundo Blogger, ele muda as cores do texto quando alguém seleciona com o mouse.

Funciona nos seguintes navegadores:
– Firefox;
– Opera;
– Chrome;
– Safari;
E NÃO funciona no Internet Explorer (para variar, sempre o IEca,né?)

Para implementar isso, vá na aba “design” >> “editar html”, não precisa clicar em “expandir modelos de widgets”, e procure pela tag: ]]></b:skin>
Cole logo ACIMA dela:


*::-moz-selection {
background:#B22222;  /*---Cor de fundo--*/
color:#ffffff;   /*--cor da fonte--*/
}
*::selection {
background:#B22222;/*---Cor de fundo--*/
color:#ffffff;  /*--cor da fonte--*/
}

Altere as cores de acordo com o seu gosto (na parte do código onde estão destacadas com comentários).

Fácil não?

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

15 Comentários

  1. Daniel disse:

    Funcionou aqui no IEca

  2. Super Facil =D
    Adorei, muito obrigada ?

  3. Eu não conseguir é pra tirar esses comentários(cor de fundo,cor da fonte)? e como eu coloco a cor?

    • Vanessa disse:

      Vc tira esses comentários se quiser. Eu coloco os comentários justamente para que o leitor possa identificar os locais editáveis e assim consiga alterar cores etc.

  4. Be a Javascript RockStar disse:

    isso me foi inusualmente util

  5. The Awesome as Fuck disse:

    Eu não consegui ):

  6. blogentreblog disse:

    olá clau , quando fui fazer o tutotial o blogger emitiu a seguinte mensagem:

    Não foi possível salvar o modelo

    Corrija o erro abaixo e envie o seu modelo novamente.
    Mais de um item encontrado com o id: Text1. Os IDs de itens devem ser únicos e exclusivos.

    OQUE EU FAÇO??

  7. Ruuh Auler disse:

    pra quem ama design, este site é perfeito!

  8. Kawann Alves disse:

    Muito bom, mas tem outro jeito mais fácil!
    é só ir em designer do modelo, depois em avançado e tem na última barrinha o nome adicionar CSS! 😀 e é só colar lá!
    Foi o que eu fiz!

  9. Silvia disse:

    Flor, desculpe a ignorância e desconsidere a pergunta.
    (Nem eu acredito que a fiz)
    rsrsrs

    Beijos

  10. Silvia disse:

    Olá…

    Antes de mais nada, quero dizer que, sou viciada em seus tutoriais.
    Fiz esse como explicou aqui, mas, quero saber se preciso postar algum script no post, pq nada aconteceu.

    Obrigada.

  11. Edilson Moreira Borges disse:

    Clau, eu to fazendo esse comentário para te avisar que neste post seu blog ainda está como Gothic Darkness, só pra te lembrar. E parabéns pelo post.

  12. ::Clau:: disse:

    @Madiel Max:
    Já era pra eu ter ensinado esse "truque" aqui, ainda bem que vc me lembrou..=]

    @EnigmA:
    Pra te falar a verdade eu não curto esse lance de selos não…rs
    Geralmente qdo recebo algum eu publico todos os recebidos em uma postagem única, mas eu ando com o tempo muito curto pra ficar repassando selo.
    De qualquer forma, agradeço imensamente por ter lembrado do Gothic Darkness, e é óbvio que jamais faria uma desfeita com vc, portanto, vou publicar o selo na postagem de selos recebidos, mas infelizmente, como te falei, não vou poder repassa-lo no momento.
    Obrigada mesmo assim, valeu pela intenção 😉

  13. EnigmA disse:

    Olá Cláu… Indiquei seu blog para receber o selo "Prêmio dardos" nos meus dois blogs. Não sei se vc curte essas coisas mas dá uma olhadinha lá!

    http://ensaiosenigmaticos.blogspot.com/2010/06/selo-premio-dardos.html

    http://allanpoe4.blogspot.com/2010/06/selo-premio-dardos.html

  14. Madiel Max disse:

    Olá Clau, me salvaste de mais um heim?

    Obrigado.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.