Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Iniciantes Postagens Vanessa S.

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” , leia o artigo que fala sobre Diferenças entre Margin e Padding.[/dica]

Artigo atualizado em jun/2012.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

19 Comentários

  1. Taillard disse:

    Beijos enormes rainha!
    Estou na ativa novamente menina!
    Adorooo você!

  2. .:: Nessa ::. disse:

    Ledmilson
    Tenta utilizar o comando <*div align='center'*>

  3. Ledmilson de Sá Motta disse:

    Ei gostaria de saber como centralizar imagens que são inseridas diretamentes do HTML do blogger (Não utilizei o método que vc ensinou neste post).É que coloquei umas imagens para ser o título das gadgets, porém quando dou um zoom out na tela, as imagens saem fora do lugar e fica desorganizado.Então queria saber como faço para deixá-las sempre o centro da tela, tentei de tudo mais ainda não consegui.Espero que vc possa me ajudar! Até mais.

  4. João Pedro disse:

    Adorei amigo, fucinouououou
    obrigado!!!

  5. Geeksolitario disse:

    Eu não entendi tipo eu tenho que colocar em cima do .post h3 ? do lado? me explique como eu insiro por favor!

  6. «O» msd «?» disse:

    eu não entendi uma coisa, depois que eu achar a linha do código eu tenho que subustituilá por esse que você passou? ou apenas acrescento esse código ao que já se encontra no meu blog?

  7. .:: Clau ::. disse:

    daivarela
    Infelizmente eu não tenho como te ajudar, pois pode ser algo relacionado ao seu template. Provavelmente o post-footer deve estar agregado ao código do titulo do post tb. Deve ser alguma configuração nele, e não há como eu saber especificamente qual é.

  8. daivarela disse:

    A img no titulo continua a aparecer por baixo da img da assinatura do autor.
    Acho que não depende do tamanho mas sim da posição da img.
    Se puder ajudar, agradecia.

  9. daivarela disse:

    Oi CLAU.
    Coloquei a img para 48×48 px, mas ela repete-se no footer do post (na assinatura personalizada, que aliás aprendi a fazer aki).
    Tenho colocado no-repeat
    A opção que irei usar é diminuir a img para 45×45 px para que fique embaixo da img do autor do post.
    Tem outra opção?
    Bijim

  10. .:: Clau ::. disse:

    daivarela
    Vai depender do tamanho q vc determinou pra largura dos posts no seu template. Não há como eu saber.
    Obrigada pela visita e pelo comentário. Volte sempre!

  11. daivarela disse:

    Saudações das maravilhosas Ilhas de Cabo Verde (West Africa).
    Tem um tamanho max da img?

  12. Lukas disse:

    Clau,eu não entendi.
    Por exemplo,no seu portfòlio,no tìtulo você colocou imagens diferentes,vamos supor que eu queira colocar imagem sò no post: 'Ìndice',aì como de faz?

  13. .:: Clau ::. disse:

    Lucas
    Já existe tutorial ensinando isso.
    Basta ler os tutoriais "aprendendo css" e veja o artigos sobre CSS text.
    Procure sempre olhar no menu indice "Tutoriais Blogger" antes de deixar uma pergunta,pois pode ser que já tenha publicação de tutorial para o que vc precisa.

  14. Lucas disse:

    Clau,queria muito um post,ensinando a personalizar o textos dos posts,deixar em letra maiùscula,sombreada,com a primeira letra destacada,igual o o do seu template 5.0
    eu acho que você usa um efeito Css,certo? obrigado!

  15. ::Clau:: disse:

    IdNSeco
    Vc vai ter q identificar no seu template, qual é o código q se refere ao titulo das postagens.
    Não tenho como te ajudar, para cada caso é um caso.

  16. IdNSeco disse:

    Olá, eu to tendo uma dificuldade em colocar o codigo no meu template, é porque no meu template não tem o codigo .post h3 ou .post-title T_T, será que tem alguma forma de adicionar eles? Eu uso o novo blogger…

  17. ::Clau:: disse:

    @Maçã:
    Infelizmente eu não tenho como te ajudar, pois pode ser algo relacionado ao seu template, deve ser alguma configuração nele, e não há como ue saber especificamente qual é.

  18. Maçã disse:

    Olá !
    Estou tendo um pequeno problema com os comentários.
    Fiz uma edição no título da postagem (coloquei uma foto de fundo, borda e troquei a cor do efeito hover), e automaticamente modificou também a caixa onde fica escrito "X comentários". Até aí tudo bem, só que essa mudança nos comentários só ocorreu em UMA página, as outras continuam normais.
    Agradeceria DEMAIS uma ajudinha.
    Abraços!

  19. Raquel Leite disse:

    Valeu mesmo! Estava procurando e havia encontrado no Blogue que vc citou, mas estava meia confusa em um item. Você esclareceu muito bem! Obrigado!

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.