20 dezembro 2012

como por imagem no titulo das postagens

Olá meninas hoje trago a vocês um tutorial muito legal e vocês vão gostar,vamos ver?então não tire os olhos deste post ta bom?eu sei que estou postando duas vezes hoje mas é que preciso postar se não fico louca sabem como é né?então me entendem !!! vamos lá?

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.
espero ter ajudado beijos e até mais. beijos cutes

3 comentários:

  1. E bem legal esse tutu mas infelizmente gosto de deixar o título da post assim!
    Estou querendo ser sua afiliada como?
    Beijinhos da sua grande amiga!
    E participa do especial em?
    http://diquinhasdababinha.blogspot.com.br/2012/12/tentando-explicar-melhorespecial-de.html#comment-form

    ResponderExcluir
  2. Já usei muito esse tuto, é muito util ;)

    american---girl.blo * gspot.com.br/
    <<tire a estrelinha e visite ;D

    ResponderExcluir

*comentarios que não se refere ao post será ignorado
*sem palavrão,por favor