12 setembro 2012

Negrito, itálico, sublinhado e riscado com efeito hover

Tumblr_m8ttrazhcw1rtv7tqo1_1280_large
Olá brigadeiros de maracujá! Como vai a vida? ~aqui é a Sofi~
Eu trouxe para vocês, um tuto bem útil para o seu blog, ensinando a deixar o negrito, itálico, sublinhado e riscado personalizados, e com efeito hover!
Vamos lá?



Vá em design > Editar HTML > Tecle Ctrl+F e procure por ]]></b:skin>. Quando achar, cole esse código acima da tag:

b{color: #DA70D6; text-decoration: none;} /* Estilo do negrito */
b:hover {color: #DA70D6; text-decoration: none;} /* Estilo hover do negrito */
i {color: #63B8FF; text-decoration: none;} /* Estilo do itálico */
i:hover {color: #63B8FF; text-decoration: none;} /* Estilo hover do itálico */
u {color: #1C1C1C; text-decoration: none; border-bottom: 1px dashed #7CFC00;} /* Estilo do sublinhado */
u:hover {color: #1C1C1C; text-decoration: none; border-bottom: 1px dashed #7CFC00;} /* Estilo hover do sublinhado */ 

strike {color: #009900  ; text-decoration: strike;  } /*estilo do riscado */
strike:hover {color: #FF00FF; text-decoration: strike;  } /*estilo hover do riscado */


Se vocês quiserem sem o efeito hover, substitua o código anterior por:

b{color: #DA70D6; text-decoration: none;} /* Estilo do negrito */
i {color: #63B8FF; text-decoration: none;} /* Estilo do itálico */
u {color: #1C1C1C; text-decoration: none; border-bottom: 1px dashed #7CFC00;} /* Estilo do sublinhado */
strike {color: #009900  ; text-decoration: strike;  } /*estilo do riscado */ 


Créditos: ~www~
O efeito fica muito legal! Gostaram?
Beijo, Sofi

18 comentários:

  1. Ótimo tutorial, amo muito esse efeito! É muito útil!!

    Beijos!
    Garota Vertigem

    ResponderExcluir
    Respostas
    1. Obrigada! Eu também gosto muito dele!
      Beijos, Sofi

      Excluir
  2. Adoro esse efeito, sempre uso em meus layouts!
    kiss

    morango-aos-pedacos(tk)

    ResponderExcluir
    Respostas
    1. Eu também! É muito útil!
      Beijos, Sofi

      Excluir
  3. Ooi ta rolando um concurso la no blog http://one-teens.blogspot.com.br/2012/09/concurso-i-love-meu-blog.html
    Gostaria que você participasse Beijos

    ResponderExcluir
    Respostas
    1. Flor, me desculpa, mas no momento estamos sem tempo para minigames :( Talvez mais tarde, quem sabe?
      Beijos, Sofi

      Excluir
  4. adorei seu blog, super criativo.
    http://segredosdeblogueira.blogspot.com.br/

    ResponderExcluir
  5. adorei as dicas
    sempre quis fazer esses efeitos e nao sabia como

    ja estou te seguindo
    da uma passadinha do meu blog bjos

    http://vallentinaprado.blosgpot.com

    ResponderExcluir
    Respostas
    1. Que bom que gostou!
      Obrigada fofa! Pode deixar que eu vou!
      Beijos, Sofi

      Excluir
  6. Amei o blog flor, já usando o tutorial !!
    http://depoisdameianoiteoficial.blogspot.com.br/

    ResponderExcluir
  7. ja estou usando o tutorial >< obg, me ajudou muuito!

    ResponderExcluir
  8. O unico tuto que deu certo para mim... Obg!!
    minhavidaforadeseerie.blogspot.com.br

    ResponderExcluir
  9. Aii tava procurando que só esse efeito.. eu já tinha indo num site anterior que tinha mas não funfava *funcionava* e aqui funcionoou!

    Tranks •-• Mrs. Luana. :) ♥-♥

    http://teengirlstg.blogspot.com.br/

    ResponderExcluir
  10. Muito brigada pelo tuto me ajudou demais!
    Beijos :*
    minhas-confissoes-2012.blogspot.com

    ResponderExcluir
  11. Oi, quando eu fui botar no meu blog no html novo, apareceram cores que eu não tinha posto, tipo verde. Você sabe o que eu faço? Eu usei essa tabela de cores: http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm
    Beijos!

    ResponderExcluir

E ai batatinha ?Tudo bem ?Adoro quando vocês comentam só se lembre de umas coisinhas :

-Nada de xingamentos
-Se for criticar seja educado
-Comentários tipo :''Seguindo ,segue de volta ?'' Serão ignorados

Test 1

Bem vindo!

Oi pequeno panda viajante!Esse aqui é o Maçã cor de rosa,um blog com tutoriais,materiais,dicas e ou coisinhas legais.A dona daqui é a Jelly e quem a ajuda ela são a Stephanie e a Lara.Sinta-se em casa :D

Related Posts Plugin for WordPress, Blogger...