Todo mundo usa o negrito, o itálico, o sublinhado e o riscado para dar mais destaque a algumas palavras e deixar o texto com um visual mais atraente. Hoje vou ensinar a personalizar esses recursos, mudando as cores e deixando os mais atraentes. Vamos lá:
Personalizando com efeito hover
(muda de cor quando passa o mouse em cima):
Vá em Design, editar HTML e procure por ]]></b:skin>, logo acima cole:
b{color: #DA70D6; text-decoration: none;-webkit-transition-duration: .40s; } /* Estilo do negrito */
b:hover {color: #DA70D6; text-decoration: none;-webkit-transition-duration: .40s; } /* Estilo hover do negrito */
i {color: #63B8FF; text-decoration: none; -webkit-transition-duration: .40s;} /* Estilo do itálico */
i:hover {color: #63B8FF; text-decoration: none; -webkit-transition-duration: .40s;} /* Estilo hover do itálico */
u {color: #1C1C1C; text-decoration: none; border-bottom: 1px dashed #7CFC00; -webkit-transition-duration: .40s;} /* Estilo do sublinhado */
u:hover {color: #1C1C1C; text-decoration: none; border-bottom: 1px dashed #7CFC00; -webkit-transition-duration: .40s;} /* Estilo hover do sublinhado */
strike {color: #009900 ; text-decoration: strike; -webkit-transition-duration: .40s; } /*estilo do riscado */
strike:hover {color: #FF00FF; text-decoration: strike; -webkit-transition-duration: .40s; } /*estilo hover do riscado */
Sem efeito hover:
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 */
Obs: Se não funcionar basta colar o código mais para cima, por exemplo, em cima do código de ocultar a navbar.
Se precisar use a tabela de cores Tabela de cores.
Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar
Adorei!
ResponderExcluirhttp://devushkinha.blogspot.com
Obrigado
ResponderExcluirhttp://photographydayoficial.blogspot.com/
Muito útil!
ResponderExcluircafecomliivro.blogspot.com
Amei, deu para personalizar bastante meus posts ♥
ResponderExcluircrazy-landia.blogspot.com.br
Obrigada pelo tutorial! Me ajudou mt! =D
ResponderExcluirDeus abençoe!
http://resgatadapelorei.blogspot.com.br/
obrigadinha
ResponderExcluirhttp://wohoom.blogspot.com.br/
Excluir