Tutorial: Negrito, Itálico, Sublinhado e Tachado personalizados

30.5.13

A vida é bela <3
Hey cuties! ~~
Bom, indo direto ao ponto, hoje eu irei ensinar a vocês um tutorial mega fácil que eu achei no Bunny Crazy para personalizar o Negrito, Itálico, Sublinhado e Tachado do seu blog.
Irei ensinar duas maneiras: A normal, para apenas mudar as cores e a hover - para mudar de cor quando passa o mouse.
Continue lendo para aprender o tutorial ^^
~Bom, primeiro eu vou ensinar a maneira normal, para apenas mudar a cor, é bem simples:

Vá até seu HTML e pesquise pela tag: ]]></b:skin>
Após achá-la cole esse código em cima dela:

b {color: #f08080; text-decoration: none;} /* O Negrito */ 
i {color: #ff7f50; text-decoration: none;} /* O Itálico */u {color: #ffca85; text-decoration: none;border-bottom: 1px dashed #ffca85;} /* Sublinhado */s, strike { color: #99aaff; cursor: normal; } /*O Riscado*

~Agora a com efeito hover:

Vá até seu HTML e pesquise pela tag: ]]></b:skin>
Após achá-la cole esse código em cima dela:
     b {color: #F08080; text-decoration: none;} /*Negrito */
     b:hover { cursor: help; color: #FF6347;}
     i:hover { cursor:  help; color: #FF6347;}
    u {color: #F08080; text-decoration: none;
    border-bottom: 1px dashed #FF6347;} /* Sublinhado */
    u:hover {cursor:  help ; color: #FF6347;
    border-bottom: dashed 1px #FF6347; text-decoration: none; }
    i {color: #FF7F50; text-decoration: none;} /* Itálico */

~Explicando os códigos:
O que está em rosa são os códigos das cores normais, você pode substituí-las usando a Tabela de cores (www).
O que está em azul são os códigos das cores no efeito hover. Você as substitui com a mesma Tabela de cores.
O que está grifado é o tipo de cursor (ponteiro do mouse) que você pode alterar se quiser. O help, é aquele cursor que tem um pontinho de interrogação ao lado.

~> Aqui estão todos os nomes de cursores:

Crosshair (cruz)
Default (seta)
E-resize (seta que aponta à direita)
Help (ponto de interrogação)
Move (cruz com setas nas extremidades)
N-resize (seta que aponta para cima)
Pointer (mão)

Nossa gente, não tem como não ter entendido porque eu expliquei MUITO detalhadamente. Espero que tenham gostado! Beijos :3




40 comentários:

  1. Awiin , Adorei Parabens ♥
    Obrigada por seguir meu blog seguindo Devolta !
    Garota Impiedosa .

    ResponderExcluir
  2. Esse tutorial é muito bom, já conhecia adoro ele!

    vaonamala0ficial.blogspot.com

    ResponderExcluir
  3. Esse tutorial é ótimo, adorei ele ♥ Prefiro aquele com hover transiotion, é mais lindo >3< Estou seguindo-te, flor, como pediu *u*

    Beijos,

    Juu-Chan do Nescau com Nutella.

    ResponderExcluir
    Respostas
    1. Que bom que gostou e obrigada por seguir!
      Beijos ^^

      Excluir
  4. Oii sou nova aqui ainda nao conhecia seu espaço *--* é lindo, serio apaixonei por aqui , adorei seus posts e voltarei sempre aqui.
    já estou seguindo, retribui?

    Beijos / feriasde-outono.blogspot.com.br/ (<~ Visita?)

    ResponderExcluir
    Respostas
    1. Awwwwn obrigada sua fofa!
      Claro que retribuo *3*
      (amoo seu blog)
      Beijos

      Excluir
  5. Olá!!!Tudo bem com você?Quer mais um mebro ao seu blog?Então veja/siga/comente nessa postagem:

    http://mundo-desonhadores.blogspot.com.br/2013/05/projetoseguindo-segue-de-volta.html

    Beijinhos

    ResponderExcluir
  6. Adorei o tuto e o blog, amei, já estou seguindo amor!
    Tem post novo no The Clouds, corre ver!
    Beijos, Djêni.

    ithe-clouds.blogspot.com

    ResponderExcluir
  7. Aiiii que divo seu blog! Primeira vez por aqui e já sou fã! Serio mesmo, seu blog é muito cute,amei,amei,amei!!!!
    E tambem adorei esse tuto, sem ele o blog não é o mesmo.

    Kisses :3 photoscapeevc.blogspot.com

    ResponderExcluir
    Respostas
    1. Awn muito obrigada lindinha!
      É verdade, muito útil
      Kissees! *3*

      Excluir
  8. Adorei o tutorial, e é bem fácil também!
    Seu blog é muito lindo, que layout mais perfeito!! Amei <3

    Estou te seguindo, flor ><

    Beijos, blog ~~> Kiss of Gloss

    ResponderExcluir
  9. Oii fofa!
    Seu blog é uma gracinha! Adorei o tutorial!
    Seguindo aqui, segue de volta?
    sweetmeninateen.blogspot.com

    ResponderExcluir
    Respostas
    1. Olá, obrigada
      Já tô seguindo seu blog, obrigada pela visita.
      Beijinhos >3<

      Excluir
  10. Amei o tutorial, vou usar ajudou muito estava precisando

    ta tendo sorteio lá no blog amore, se quiser participar
    http://chocoonut.blogspot.com.br/

    ~Kiss

    ResponderExcluir
    Respostas
    1. Que bom que gostou!
      Vou dar uma olhadinha.
      Beijo ~~

      Excluir
  11. Oii retribuindo a visita! Esse tuto é muuito pratico. vou usa lo ^^

    Post Novo visita? ~> feriasde-outono.blogspot.com.br/

    ResponderExcluir
  12. Eu amo esse tuto, é ótimo ^^
    Beijos | empire-explosion.blogspot.com

    ResponderExcluir
  13. Amei seu blog flor! Posts realmente muito bons e design incrível *-* já estou seguindo, se gostar me segue lá? http://minhaeguinhapocoto.blogspot.com.br/ obrigada, beeijos <33

    ResponderExcluir
    Respostas
    1. Ahh obrigada, lindinha!!
      Vou seguir
      Beijinhoos *3*

      Excluir
  14. Muito divo esse tutorial,quando eu vou fazer um template é a primeira coisa que eu coloco *--* fica muito fofo e dá mais alegria ao blog e é muiito fácil de colocar! Awn adorei seu blog,ainda não conhecia e já estou amando! :3 Seguindo,retribui? Tenha uma linda tarde! n_n
    Küss->quem precisa de tv para ver beyoncé ♥.blogspot♥♥.com♥ [tire os corações e espaços para visitar]

    ResponderExcluir
    Respostas
    1. Awn obrigada lindinha :3
      Retribuo sim, obrigada
      Beijos *3*

      Excluir
  15. Conhecia esse tutorial, acho bem bonito mas tenho uma preguiça enorme de por, e ter que conciliar as cores com o layout. Então o meu fica sem personalização mesmo xD. Mas enfim, é realmente útil pra quem gosta desse efeito..

    estantedahina.blogspot.com

    ResponderExcluir
  16. Esses tutoriais são ótimos e sempre me ajudam à beça, acredite...
    Lindo aqui amore, estou te seguindo também!

    Beijos ♥ Jeito Único

    ResponderExcluir
  17. Amo este tuto <3
    E seu blog é MA-RA-VI-LHO-SO xonei \o/
    Seguindo ;) Se gostar do meu blog pode seguir de volta?
    Obrigada se Puder ^-^

    Ah! E gostaria de se afiliar?
    Se sim, comenta lá no blog :D

    Beijinhos ;*

    http://pantherpinkandblue.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Nossa muito obrigada!
      Vou visitar eu blog
      Claro, as vagas para afiliação estão abertas, vou confirmar
      Kisses ~ >3<

      Excluir
  18. Nossa, esse tutorial é tudo, amo ele, vou aplicar no meu layout.Além do código de HTML, da nova interface do blog, esta bastante complicada!
    Beijos, ótimo blog e sucesso.;p

    http://blog-sweet-thoughts.blogspot.com.br/

    ResponderExcluir
  19. Olha só que legal, =D Gostei do tuto...
    Bjinhos

    ResponderExcluir

Vai comentar? Fico muito feliz! Aqui estão algumas regras:

-Pode comentar "Seguindo, segue de volta?" desde que comente algo sobre a postagem.

-Se for criticar, mostre a sua cara, não gosto de comentários anônimos.

-Aceito críticas apenas se forem CONSTRUTIVAS, ok?

-As vagas para Afiliados estão abertas.

Se seguir todas essas regrinhas eu terei prazer de responder seu comentário!