Negrito, itálico e sublinhado personalizados

Ok, todos sabem que é muito legal destacar uma coisinha ou outra na postagem, tem gente que destaca colorindo a letra ou colocando um fundo coloridinho a palavra, como se fosse marcado por grifa-texto. Mas há um jeito melhor de fazer isso, isto é, usando as ferramentas do Blogger (facílimas de usar) que são o negrito, o itálico e o sublinhado. "Não, Mirajane, apesar do efeito a letra continua da mesma cor das outras palavras!": Não. Há uma maneira de deixar o seu negrito o seu itálico e o seu sublinhado automaticamente personalizados, com uma cor padrão pra cada um, e isso se torna vantagem ao trocar o layout. Por que, por exemplo, se antes a cor tema do seu Blog era verde e você destacava as palavras com verde, a trocar seu design pra algo mais rosa iria ficar muito - me desculpem - feio. Já mudando as cores por HTML esse problema não existe; Sem mais delongas, vamos aos tutoriais? Sim, aos tutorias. Por que há dois jeitos de fazer isso, mudando normalmente ou mudando e mudando de novo quando passa o mouse. Primeiro o mais simples (embora ambos sejam fáceis): que é o do que não tem o efeito de quando passa o mouse. Vá no seu HTML, aperte Ctrl+f e busque por (]]></b:skin>) - sem os parênteses. Depois de encontrar, cole acima dele o seguinte código:

b {color: #9F79EE; text-decoration: none;} /* Estilo do negrito */
i {color: #FF6EB4; text-decoration: none;} /* Estilo do itálico */
u {color: #666666; text-decoration: none; border-bottom: 1px dashed #9F79EE;} /* Estilo do sublinhado */

Faça as alterações necessárias, visualize e salve. Agora o outro, que tem o efeito de passar o mouse (hover): Vá no seu CSS e cole o código abaixo:

b {color:#99CDDF; padding: 0 2px 0 2px;} /*negrito*/
b:hover {color:#1c1c1c;} /*Negrito quando o mouse passar por cima*/
i {color:#000000; line-height: 12px;} /* Itálico*/
i:hover {color:#FFA579;} /*Itálico quando passar por cima */
u {border-bottom: 1px solid #99CDDF; text-decoration: none;} /*Tracinho do sublinhado*/
u:hover {border-bottom: 1px solid #FFA579; text-decoration: none;} /*Tracinho do sublinhado quando o mouse passar por cima*/

TIPOS DE SUBLINHADO: ENTENDA!

Em ambos os códigos quando chega a parte do sublinhado tem um nome-chave que identifica o tipo de sublinhado que vai aparecer no seu Blog. No primeiro tutorial (sem hover) está lá: 1px dashed e no outro está 1px solid. Existem quatro tipos de sublinhado, você pode escolher o seu e modificar no seu HTML/CSS: solid (que é a linha reta), dashed (que é uma linha tracejada), dotted (que é uma linha formada por vários pontinhos) e double (que corresponde a duas linhas, uma acima da outra, para que o efeito saia como o esperado é necessário modificar o 1px pra 2px). É só isso mesmo, docinhos de coco. Créditos do Blog Chovendo em Paris e On The Fame.