quinta-feira, 25 de outubro de 2012

Personalizar - Título do Post

                                  
Gente,eu coloquei os comentários para moderação,porque muita gente tá tipo "seguindo,segue o meu?"estou ficando com raiva .-.
Olá,pelo título vocês vem que são tutos para personalizar o título da postagem.Os créditos vão ao KW.

Personalizar a fonte do título do post,deixar em hover e centralizá-lo.

Primeiro entre nesse site: google.com/webfonts e escolha uma fonte ,eu escolhi a fonte Ranchers.Depois de escolher a fonte,você vai clicar em Quick Use,no cantinho,então abrirá uma página,agora,desça um pouquinho e você verá o código da sua fonte:

Primeira pate feita,agora você vai no seu HTML,e procurará por <head>,e cole o código que você pegou lá no site.


Se você salvar assim,aparecerá uma mensagem de erro,então para isso não acontecer,somente coloque uma " / "antes do último >. Se voê não entendeu olhe o exemplo abaixo:

Antes era : <link href='http://fonts.googleapis.com/css?family=Ranchers' rel='stylesheet' type='text/css'>

Mas depois eu coloquei o / e ficou assim: <link href='http://fonts.googleapis.com/css?family=Ranchers' rel='stylesheet' type='text/css'/> 

Bom,agora vamos aplicar a fonte.  Agora procure por: h3.post-title a {
Vai aparecer isso abaixo dele:

font: $(post.title.font);
color: $(post.title.text.color);


Substitua pelo código abaixo:
font-family: Nome da fonte que escolheu
color: #código da cor que vai usar;


O meu ficou assim:

font-family: Ranchers; /* fonte do título */
font-size: 20px; /* tamanho da fonte */

Bom,se quiser adicionar hover ao título do post,basta colar abaixo do código da fonte,esse:


color: #000; /* cor do título em estado normal */
}

h3.post-title a:hover {
color: #fff; /* cor do título em estado hover */
}
Eu alterei cores e deu certo,visualize para ver se nada de errado ocorreu.


Centralizar o Título do Post:


É muito simples,basta procurar por /* Posts abaixo da tag terá umas linhas pontilhadas,agora abaixo delas cole isso:

    h3.post-title {

text-align:center;

} 

Deu,agora está mais fofo o título da sua postagem!Como eu sei,se nem vi T.T.Esse foi o tuto de hoje,e se quiserem tipo,dicas e tutoriais para criar um layout/template...

6 comentários: