Como Colocar uma Imagem no Título do Post

No template Blue Love, adicionei uma imagem no Título do Post.

Atendendo a pedidos vou explicar como fiz isso.

1º - Encontre no bloco de códigos CSS do seu template em Modelo→Editar HTML
O código de comando do Título do Post geralmente é este .post h3 ou .post-title ou h3.post-title (Utilize Ctrl+F)

Aqui vou usar este bloco de códigos:

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

» Veja a linha em vermelho, ela determina o fundo do título do post, onde você pode colocar imagem como está configurado acima.
Os outros comandos da linha significam:
no-repeat→ a imagem não deve repetir;
left → imagem alinhada à esquerda;(Você pode alinhar sua imagem onde quiser, basta ajustar a margem interna-padding)
top → imagem alinhada no topo.

No template Blue Love usei uma imagem com as dimensões 45x45px, que é um tamanho bom, prefira imagens deste tamanho ou menores.

» Estão vendo a linha em verde. Ela determina as margens internas do título do post, que você deve sempre configurar para que o título não fique em cima da imagem.
♦ As medidas devem ficar nesta ordem para configurar as respectivas margens:
padding: 10px(margem superior) 0(margen direita) 8px(margem inferior) 50px(margem esquerda);
→ Notem que a margem esquerda é um pouco maior que a largura da imagem. Fique sempre atento a isto.

Nos templates 2010 do blogger por exemplo, no Modelo Simple vai aparecer o código:
h3.post-title, .comments h4 {
font: normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
margin: .75em 0 0;
}

Neste caso você deve separar os comandos h3.post-title do comments h4 ficando assim:
h3.post-title{
font: normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
margin: .75em 0 0;
background:transparent url("URL da IMAGEM") no-repeat left top;
padding:10px 0 8px 50px;
}
.comments h4 {
font: normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
margin: .75em 0 0;
}
Para o código do título do post (h3.post-title) acrescente as linhas do background e padding como está acima e siga as orientações do post.

Espero ter ajudado!
Até mais!


Post atualizado em 20/09/2012
Como Colocar uma Imagem no Título do Post Como Colocar uma Imagem no Título do Post Reviewed by Áurea on 9/20/2012 Rating: 5

28 comentários:

  1. quero botar no fundo do posts e/ou dos widgets. ainda n sei direito. quero botar um simbolo do palmeiras ou alguma coisa do time com um tom bem leve

    ResponderExcluir
  2. ou entao no fundo de td tb poderia ser. no lugar daquela parte cinza, poderia ter alguma foto configurada pra ficar lado-a-lado e preencher o site todo

    ResponderExcluir
  3. Lucas,
    Encontre os códigos .sidebar .widget e .main .widget, se estiverem juntos separe-os copiando o resto do código entre{} para o .main .widget, ficando assim:
    .sidebar .widget{etc}
    (comanda as widgets das sidebars)
    .main .widget{ect}
    (comanda a widget do post)
    Feito isso, acrescente a linha:
    background:transparent url("URL da IMAGEM") no-repeat left top;
    Fazendo as alterações necessárias.
    Para o fundo do blog encontre os comandos do .body e acrescente a linha acima também com as alterações necessárias.

    ResponderExcluir
  4. Oi como sempre estou por aqui olhando e pegando algumas dicas coloquei seu banner em meu blog para divulgar o seu ok?
    Abraços
    Douglas Costa
    [I

    ResponderExcluir
  5. Bom, eu queria saber, como faz pra botar os widgets no Blog???, eu não sei como faz!!!Em ´que parte daquele textão do HTML, que eu boto o Link do Widgets que eu quero botar???

    ResponderExcluir
  6. Olá, desculpe estar "ressucitando" este post, mas é que não consegui colocar a imagem. quer dizer, a imagem fica lá, mas as letras ficam por cima. eu mudo os valores do espaçamento, mas mexe tudo junto: titulo e imagem. Será que você podia e ajudar?

    ResponderExcluir
  7. @Jana KeanuLôka Em qual dos seus blogs você está tentando colocar a imagem no título dos comentários? E não se preocupe você não está ressucitando este post. Ele está aqui para ser útil a qualquer momento!

    ResponderExcluir
  8. Oi, Áurea, me desculpe a demora.
    Eu descobri pq não estava conseguindo colocar a imagem... eu estava colocando apenas os códigos de espaçamento, quando devria copiar e colar todo o código que vc mostrou aqui. Obrigada por me ajudar. Eu estava muito querendo colocar a imagem no titulo e, graças à você, consegui! Muito obrigada!

    ResponderExcluir
  9. @Jana KeanuLôka Que bom que deu certo. A idéia é essa ler, tentar e aprender o tempo todo. O TPV é apenas uma orientação para você conseguir sozinha. Fico muito feliz.
    Bjks

    ResponderExcluir
  10. Boas, seguindo este tutorial consegui colocar a imagem alinhada a direita ou a esquerda do titulo gostava de saber se é possível colocar 2x a mesma imagem, uma encostada a direita e outra a esquerda. apenas consigo colocar a direita, a esquerda ou repetindo.
    Desde já obrigado pelo tutorial.

    ResponderExcluir
  11. @PRF Você terá que criar uma imagem única com as duas que quer colocar. Infelizmente não sei como colocar 2 imagens ao mesmo tempo num unico espaço. A não ser que você crie outro gadget para a outra imagem.

    ResponderExcluir
  12. Olá,
    vou buscar resumir um pouco.
    Bem, a algum tempo atras fiz tudo isso que vc disse e apareceu normal! :)
    esses dias eu coloquei um background no meu blogspot e até então a imagem do titulo do post aparecia direitinho...só que qd entrei novamente a imagem apareceu pela metade!
    ai eu apaguei e fiz tudo de novo...e continuou a mesma coisa.
    No inicio de tudo eu estava querendo colocar imagem da data.
    eis a pergunta:
    como eu faço para a imagem não aparecer pela metade?
    como eu coloca a imagem não só do lado esquerdo mais tbm do lado direito?
    e qual é a tag no codigo html que eu possa colocar a imagem nela?
    desculpe o tanto de perguntas :)
    Beijos

    ResponderExcluir
  13. Meu site não tem ".post h3 ou .post-title"...
    Onde eu coloco para imagem aparecer?

    ResponderExcluir
  14. caraca vei.. to muito confuso. =/

    como ki é ai? eu copio esse codico ki ta do quadrado ai e colo la no lugar de editar HTML ou ja tem esse codico la?

    ResponderExcluir
  15. Olha, to com uma duvida, como aumento a margem para o lado, pois preciso aumentar para o lado, quero que a imagem ocupe todo espaço do titulo do post, só que a imagem fica cortada, obrigado!

    ResponderExcluir
  16. Olá, eu estou tendo dificuldades porque meu template não tem a tag post-title T_T tem alguma maneira de adicionar?

    ResponderExcluir
  17. Oii, eu não achei o ".post h3" o que eu faço para acha-lo ?

    ResponderExcluir
  18. vc poderia me ajuda e se fosse mais de 1 autor no blog?

    ResponderExcluir
  19. Oi moça,

    Sua dica me ajudou muito. Obrigada!

    Abraço! =)

    ResponderExcluir
  20. VLW ! EU CONSEGUI !!!!!!!!!!!!!!!!!!!11

    ResponderExcluir
  21. me ajudem por favor , nao acho o codigo por favor me ajudem

    ResponderExcluir
  22. To com um problema: No meu blog eu encontrei o .post-title mas o resto do código não tá la...

    ResponderExcluir
  23. Affs explicação mau feita pelo adms!Dica:EXPLIQUE MELHOR ONDE FICA OS CODIGOS!

    ResponderExcluir
    Respostas
    1. Basta saber usar o recurso Ctrl+F do seu navegador que você acha tudo o que quer no código HTML.

      Excluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.