Título das Postagens Personalizado - I.

Olá povoado! 

Finalmente o blog voltou, finalmente estamos de volta! E agora com novidades, temos agora afiliações;  possivelmente abrirei vagas para equipe, novo layout feito totalmente por mim; entre outras coisas. Agora sim o Etc For Me está a minha cara! 

Para iniciar essa nova fase no blog, eu irei postar muito mais, umas duas ou três vezes por dia, e hoje eu trago um tutorial feito por mim! Como personalizar o título das postagens, isso mesmo, das POSTAGEM, e não o título do BLOG. Eu estou trazendo esse tutorial pois eu tive grande dificuldade para achar um bom tutorial, então eu mesma fui mexendo nos códigos e deu certo! Uhuuuuuuuuu.

Bom, para começar, primeiro vá no painel do blog, depois em modelo, editar html e pesquise a seguinte tag: h3.post-title { (mesmo esquema, clica nós códigos e usa CTRL F para ajudar na pesquisa);

Em baixo desse código vai estar assim:

font: $(post.title.font); color: $ (post.title.color); margin: 0; font-size: 30px; }

Apague essa parte e substitua por esse código:

h3.post-title {   margin-top: -20px;   text-align: center;  font-family: escolha uma font;   font-size: 30px;   color: #f6a0d6; -webkit-transition-duration: .90s; }

Depois disso, pesquise a tag: h3.post-title a {

Apague a parte dessa tag (que vai desde h3.post-title a { a essa }) e substitua por esse código:

h3.post-title a {   font-family: sua fonte aqui;   font-size: 30px;   color: #f6a0d6; -webkit-transition-duration: .90s; } 

Por fim, vamos personalizar o hover dele. Pesquise a tag: h3.post-title a:hover { (se não tiver, pode acrescenta-lá abaixo da tag que foi personalizada anteriormente) E novamente substitua pelo código a seguir:

h3.post-title a:hover {
  text-decoration: none;
  text-shadow: 0 1px 1px #a9a7a7;
  color: #f45dbb;
  letter-spacing: 3px;
-webkit-transition-duration: .90s;
}

------------------------------------------------------------------------------------------------------------------------

Entendendo o código:

 Font: É onde você coloca a fonte que você quer no título dos seus posts;

Color: É a cor que você quer; Veja a tabela de cores aqui;

Font-size: Tamanho da fonte;

Margin-top: O quando a fonte vai estar para cima;

Text-align: O alinhamento do texto, ele está centralizado, se você quer ele para a direita use "right", se quer ele para a esquerda use "left";

-Webkit-transition-duration: .90s: Efeito de separação das letras como tem no meu, se você não quiser apague essa linha;

Text-decoration: Para ver se tem o subilhado quando você passa o mouse em cima;

Text-shadow: A sombra do texto, mude como preferir;

Letter-spacing: O efeito de separação das letras, apague essa linha se não quiser esse efeito (como está no meu blog)

Hover: Quando o mouse passa em cima do título.

------------------------------------------------------------------------------------------------------------------------

Esse foi o tutorial de hoje, o primeiro código é para o título quando você clica no "Leia Mais", entende? O segundo código é para quando o título aparece normalmente, e o terceiro é ele em hover.

Personalize as partes roxas; Espero que tenham gostado do tutorial, qualquer dúvida, comentários! :) Beijos e feliz Hallowen para vocês <3