Personalizando o título das postagens

Esse tutorial  se trata de algo muito simples. Certamente você já viu em algum blog ou até mesmo no seu, o titulo da postagem super personalizada e quando você clica no post em questão fica totalmente diferente e sem personalização alguma, certo? Isso acontece porque provavelmente você ainda não sabe que o titulo da postagem tem 3 momentos:

- O momento que está na página inicial 

- O momento em que se passa o cursor em cima do titulo 

- E por fim o momento em que você já clicou no título e está na página que mostra somente o post.

E pra cada um desses ''momentos'' existe um código especifico pra você personalizar. Gente eu juro que não é difícil, segue essa linha de raciocínio que vai dar tudo certo

O código de personalização é esse:

1° Você irá copiar todo esse código 

text-align:center; /*deixa o título dos posts centralizado. Se você não quiser centralizá-los, apague essa linha.*/ 

font-family: "NOME DA FONTE AQUI"; /*Se refere a fonte*/ 

 font-size: 26px; /*Tamanho da fonte*/

color: #FF1493; /*Se refere a cor da fonte*/ 

border-bottom: 2px dashed #FF1493; /*Se refere a borda pontilhada abaixo do titulo. Se não quiser apague essa linha*/ 

background: #fff; /*Nesse trecho você pode colocar uma cor de fundo*/

Pra facilitar eu coloquei a explicação do lado de cada código. A fonte eu vou ensinar a mudar logo no final desse post. 

2° Agora vá no seu HTML e procure por: h3.post-title a {

(Esse código se refere ao momento em que título do post está na página inicial). Agora cole o código de personalização ANTES dessa chavinha:

3° Agora faça o mesmo com os outros 2 códigos:

h3.post-title a:hover {

(Este código refere-se ao momento em que se passa o cursor em cima do titulo).

h3.post-title {

(Este código refere-se ao momento quando o leitor já clicou no link da postagem e está na página onde aparece somente o post que ele está lendo).

Visualize. Se estiver tudo OK salve!

Por último personalize a fonte

Esse é o link da sua fonte hospedada (deixe aí por enquanto).

Agora cole esse código acima de ]]></b:skin>

@font-face { font-family: "NOME DA FONTE"; src: url(URL DA FONTE); }

Onde esta vermelho coloque o nome que você quiser e onde esta roxo coloque a URL do arquivo que tu hospedou.

Exemplos prontos (podem usar).

@font-face { font-family: "honey"; src: url(http://static.tumblr.com/fmvhucp/r9Cn17b5u/honeyscript-light.ttf); }

@font-face { font-family: "running"; src: url(http://static.tumblr.com/fmvhucp/2RQmy7wug/running_for_a_cause.ttf); }

@font-face { font-family: "amati"; src: url(http://static.tumblr.com/fmvhucp/ILHmy7tju/amaticsc-regular.ttf); }

@font-face { font-family: "are you"; src: url(http://static.tumblr.com/fmvhucp/at7my7ofj/are_you_freakin__serious.ttf); }

@font-face { font-family: "love"; src: url(http://static.tumblr.com/fmvhucp/2Htmyccu5/amandarae.ttf); }

Agora vocês podem personalizar qualquer fonte do seu blog, é só saber onde fica o font-family de cada um e alterar o nome da fonte padrão para o nome da fonte que vocês escolheram.