sábado, 21 de maio de 2011

Colocar Imagem no titulo do post


Se você quiser dar um melhor estilo aos titulos de suas postagem e acrescentar uma imagem ao titulo, você terá que fazer alteração no HTML do seu blog e para isso,vá em 'Layout' >> 'Editar HTML'.
Procure no corpo do HTML do seu blog, o código de comando do Título do Post, que geralmente é .post h3 ou .post-title.
(Você pode utilizar ctrl+f para encontrar o código)

.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;
}

A Linha 'Background' determina o fundo do título do post, é lá que você coloca a imagem que você quer , conforme está configurado no código acima.
No exemplo acima a imagem não não repete e se apresenta no topo à esquerda.

A linha 'Padding' determina as margens internas do título do post. Você deve configura-la para que o título não fique em cima da imagem.

Os outros comandos da linha significam:

no-repeat → a imagem não deve repetir;
left → imagem alinhada à esquerda;
top → imagem alinhada no topo.

No exemplo acima as medidas são:
padding:10px(margem superior) 0(margen direita) 8px(margem inferior) 50px(margem esquerda);
Mas você pode alterá=las de acordo com a configuração de seu template.


Fonte: http://ferramentasparablogger.blogspot.com/

0 comentários:

Postar um comentário