21/07/2012

Colocando efeitos no título dos posts

Oi gente! Hoje eu vou ensinar a como você pode colocar diferentes efeitos no título das postagens para deixa-la bem bonitinha.

1. Vá em Modelo >>Editar HTML. Procure por: /* Posts 
Você vai encontrar algo parecido com isso:

/* Posts
----------------------------------------------- */
h3.post-title {
  margin-top: 20px;
}

h3.post-title a {
  font: $(post.title.font);
  color: $(post.title.text.color);
}

h3.post-title a:hover {
  text-decoration: underline;
}



Esse grupinho é o responsável pelos títulos das postagens.Agora vamos identificar os códigos e descobrir a função de cada um.

h3.post-title { :É o responsável pelo título da postagem e sua configurações.
margin-top: 20px; : É o espaço entre título e área reservada aos posts.Se você aumentar o valor o título ira descer,se diminuir ira subir. 
h3.post-title a { : Configurações do título quando o mouse não está sobre ele. 
font: $(post.title.font) : Quer dizer que  a fonte do título será a mesma da variável(a mesma que você ajustou no ''Designer de Modelo''.)Se não quiser apague essa linha.
color: $(post.title.text.color) : Determina que a cor do título será a que você ajustou no ''Designer de Modelo''.Se não quiser apague essa linha.
h3.post-title a:hover { : Configurações do título em estado houver,ou seja,quando o mouse está pairado sobre ele.
text-decoration: underline : Determina que o título ficará sublinhado quando passarmos o mouse sobre ele. (Você já vai aprender a tirar.)


Agora você modifica tudo do seu jeito. ''Mas Anna eu não sei fazer isso!'' Eu explico.


Modificando o h3.post-title { :
 Para colocar:

Background: Com cor: background: #cor;  Com imagem: background: url (link_da_imagem) repeat;  
Linha no título: Veja aqui os estilos de linhas(leia ''Tipos de bordas[border-Style].
Embaixo do título: border-bottom: 2px dotted #ccc; Substitua dotted pela linha que quiser.
Em cima do título : border-top: 2px dotted #ccc; Substitua dotted pela linha que quiser. 
Direita do título: border-right: 2px dotted #ccc; Substitua dotted pela linha que quiser.  
Esquerda do título: border-left: 2px dotted #ccc; Substitua dotted pela linha que quiser. 
text-align: isso determina em qual posição o título ficará alinhado, center (centro),right (direita) ou left (esquerda). 

As propriedades descritas acima dever ser adicionadas embaixo de h3.post-title {  

Modificando h3.post-title a {  e  h3.post-title a:hover { :
Para mudar:

Fonte :  font-family: Georgia; Aonde está em vermelho coloque o nome da fonte escolhida.
Cor: color: #666666; Aonde está em vermelho coloque a cor que quiser,use a Tabela de Cores.
Tamanho da fonte:  font-size: 24px; Modifique pelo valor que desejar.
Itálico: font-style: italic;
Negrito: font-weight: bold;
Para tirar o efeito sublinhado do título quando ele está em estado houver: Procure por
text-decoration: underline; e substitua underline; por none; 

As propriedades descritas acima dever ser adicionadas embaixo de h3.post-title a {  ou  h3.post-title a:hover { 

O post de hoje ficou gigante mas acho que deu pra entender tudo,é só prestar bastante atenção. 
Kissus.
















7 comentários:

  1. Gostei do tutorial.

    www.teenlist.blogspot.com

    ResponderExcluir
  2. Com certeza vou usar na minha próxima mudança no lay..

    Beijo Grande, Fraan

    http://cidade-de-garotas.blogspot.com.br/

    ResponderExcluir
  3. Você explicou super bem, Ana. Já tenho a área das postagens personalizada, e não custa nada ver o tutorial de novo não é?

    Um beijo,
    http://www.world-cutest.blogspot.com.br/

    ResponderExcluir
  4. Adorei o tutu, sem falar que o resultado é incrível :D

    ResponderExcluir
  5. Adorei o tuto, explicou muito bem hein. Personalizar o título da postagem acho mega necessário !

    Beeeeijos
    #Nhaaac >>>http://the-lovers-official.blogspot.com/

    ResponderExcluir
  6. Nossa muito bom o tutorial.. e está bem explicadinho Rs :) Adorei seu blog já sz

    www.ejhonas.com

    ResponderExcluir