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

Colocar Imagem no Titulo do Post no Blogger

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 “modelo ? editar html”.
Procure no corpo do html do seu blog, o código de comando do Título do Post.
Nos Templates Minima, está representado pela variável:
.post h3 
Já nos Templates Designer de Modelo, está representado pela variável:
h3.post-title
Para colocar imagem no titulo do post, veja o exemplo abaixo, retirado do template minima:

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

Agora vejamos um outro exemplo, retirado no designer de modelo, modelo simple:

h3.post-title{
background:transparent url("URL da IMAGEM") no-repeat left top;
margin:.25em 0 0;
padding:10px 0 8px 50px;
line-height:1.4em;
}
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 o fundo não terá cor nenhuma (transparent), terá apenas uma imagem que não se repete(no-repeat) e se apresenta no topo à esquerda (left top).
A linha ‘Padding’ determina as margens internas do título do post. No meu exemplo acima, estipulei o valor de 50px , pois como a imagem background deve se ficar fixa somente no lado esquerdo, eu determinei o espaçamento entre a imagem e o título do post em 50px para esquerda, para que o título não fique em cima da imagem.
Você pode optar para que a sua imagem escolhida para compor o fundo do título, seja fixa (que ela se repita para cima e para baixo), ou que ela não se repita e fique fixa á direita, á esquerda, no topo, ou no bottom.
Veja as maneiras que você pode estipular o comportamento da imagem:
repeat; – se você quiser que a imagem se repita tanto para cima, quanto para baixo;
repeat-y; – a imagem repete somente na vertical
repeat-x; – a imagem repete somente na horizontal
no-repeat; – se você não quer que a imagem se repita, quer que ela fique fixa
top; – Imagem somente no topo
bottom; – imagem somente abaixo
right; – imagem a direita
left; – imagem a esquerda
Os outros comandos da linha significam:
no-repeat ? a imagem não deve repetir;
left ? imagem alinhada à esquerda;
top ? imagem alinhada no topo.
Lembre-se que sempre será necessário informar em que posição sua imagem deverá aparecer, e se ela deverá se repetir ou não.
[dica]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. Se quiser aprender mais sobre “padding e margin”.

0 comentários: