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 'Design' >> '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.
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. 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.
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.
.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. 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.
No exemplo acima as medidas são:
padding:10px(margem superior) 0(margen direita) 8px(margem inferior) 50px(margem esquerda);
Assinar:
Postar comentários
0 comentários:
Postar um comentário