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