Como Colocar uma Imagem no Título do Post - Fonte: Templates para você!

Como Colocar uma Imagem no Título do Post:

CLASSIFICAÇÃO DO TUTORIAL
FÁCIL

No template Blue Love, adicionei uma imagem no Título do Post.

Atendendo a pedidos vou explicar como fiz isso.



1º - Encontre no bloco de códigos CSS do seu template em Modelo→Editar HTML

O código de comando do Título do Post geralmente é este .post h3 ou .post-title ou h3.post-title (Utilize Ctrl+F)



Aqui vou usar este bloco de códigos:

.post h3 {
background:transparent url("URL da IMAGEM") no-repeat left top;
margin:.25em 0 0;
padding:10px 0 8px 50px;
font-size:140%;
line-height:1.4em;
color:$titlecolor;
}

» Veja a linha em vermelho, ela determina o fundo do título do post, onde você pode colocar imagem como está configurado acima.

Os outros comandos da linha significam:

no-repeat→ a imagem não deve repetir;

left → imagem alinhada à esquerda;(Você pode alinhar sua imagem onde quiser, basta ajustar a margem interna-padding)

top → imagem alinhada no topo.

No template Blue Love usei uma imagem com as dimensões 45x45px, que é um tamanho bom, prefira imagens deste tamanho ou menores.

» Estão vendo a linha em verde. Ela determina as margens internas do título do post, que você deve sempre configurar para que o título não fique em cima da imagem.

♦ As medidas devem ficar nesta ordem para configurar as respectivas margens:

padding: 10px(margem superior) 0(margen direita) 8px(margem inferior) 50px(margem esquerda);

→ Notem que a margem esquerda é um pouco maior que a largura da imagem. Fique sempre atento a isto.

Nos templates 2010 do blogger por exemplo, no Modelo Simple vai aparecer o código:

h3.post-title, .comments h4 {
font: normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
margin: .75em 0 0;
}

Neste caso você deve separar os comandos h3.post-title do comments h4 ficando assim:

h3.post-title{
font: normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
margin: .75em 0 0;
background:transparent url("URL da IMAGEM") no-repeat left top;
padding:10px 0 8px 50px;
}
.comments h4 {
font: normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
margin: .75em 0 0;
}

Para o código do título do post (h3.post-title) acrescente as linhas do background e padding como está acima e siga as orientações do post.



Espero ter ajudado!

Até mais!





Post atualizado em 20/09/2012

©2009 Templates para Você
Aproveite que você assina o nosso Feed e me acompanhe no Twitter ;)