Como Colocar uma Imagem no Cabeçalho dos Comentários

Quando você vai comentar em algum post de vários blogs já deve ter visto uma imagem como esta
no cabeçalho dos comentários:
Veja:
Comentários

Para que você coloque uma imagem como esta no cabeçalho dos seus comentários você deve:
Não Se Esqueça:
» Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em: Fazer backup/Restaurar
♥ Leia o tutorial até o fim e tenha certeza de ter entendido.
1º Clique em Layout ► Editar HTML ► Clique em Expandir modelos de widgets.
2º Encontre o código abaixo:
Obs: Você não precisa procurar todas as linhas do código, basta usar o Ctrl+F copiar uma linha e procurar, depois compare se o bloco de códigos se assemelha a este.

<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'> 1 Comentário:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

<dl id='comments-block'>
Acrescente a linha em vermelho com o endereço da sua imagem onde está indicado abaixo:

<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<img src='URL da sua Imagem'/>
<b:if cond='data:post.numComments == 1'> 1 Comentário:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

<dl id='comments-block'>
Complementando...
3º Para que a expressão 5 COMENTÁRIOS fique da forma como está na imagem. Você deve encontrar no CSS do seu blog a linha #comments h4 e editá-la da forma que preferir.
#comments h4{
font-weight:bold; /*Fonte em negrito*/
font-size:125%; /*Tamanho da Fonte*/
line-height:1.4em; /*Altura da Linha*/
text-transform:uppercase; /*Texto todo em caixa alta*/
letter-spacing:.2em; /*Espaço entre as letras*/
color:#2B8FB7; /*Cor da Fonte*/
margin:1em 0;
}

Para que você aprenda mais clique em:

Corrigindo o Link de Comentários
Como Realçar os Comentários do Autor do Blog

Qualquer dúvida sobre a edição do CSS consulte: CSS PARA WEBDESIGN
Como Colocar uma Imagem no Cabeçalho dos Comentários Como Colocar uma Imagem no Cabeçalho dos Comentários Reviewed by Áurea on 11/27/2012 Rating: 5

9 comentários:

  1. Olá amiguinha tudo jóia?
    Queria que vc me desse uma forcinha :D

    Gostaria de saber como eu faço para aparecer o avatar de cada pessoa que posta um comentário no meu blog assim como está aqui no seu, minha fotinho apareceu quando postei esse comentário por favor minha querida fala pra mim como que eu faço beiju.

    ResponderExcluir
  2. Nossa estou tentando fazer este hack pegar no meu blog mas não da certo aqui eo terçeiro blog que tento e sempre da o mesmo proplema de Bx-alguns numeros que naum me lembro agora o que pode ser isso será problemas no meu template será que você poderia me ajudar já nem sei mais o que fazer

    ResponderExcluir
  3. Aurea, só vou lhe fazer essa perguntar, pois tentei exaustivamente e não obtive resultado algum. Caso contrário não tomaria seu tempo.
    Hospedei minha imagem no photobucket, peguei o código html, não rolou.
    Tentei código direto para imagem, não rolou. E aí por diante, tentei vários códigos e várias vezes, mudando de lugar. Mesmo assim nada.
    Para dar certo tenho de hospedar minha imagem em algum outro site?

    Obrigada

    ATT
    Cristiane Oliveira

    ResponderExcluir
  4. @ღღCris Oliverღღ Sugiro que você crie uma conta no Tinypic e hospede suas imagens lá. Aí verám a opção: Link direto para layouts com o endereço da imagem em baixo. Copie-a e coloque como ensino no tutorial. Me fale se conseguiu.

    ResponderExcluir
  5. Oi Áurea..
    Obrigada pela ajuda. Hospedando no Tinypic dá certinho viu.
    Muito bom esse site!

    ATT
    Cris Oliver

    ResponderExcluir
  6. Olá !
    Como faço para substituir a frase "postar um comentário" por uma imagem como vc fez no seu blog ?

    ResponderExcluir
  7. Olá Áurea, venho acompanhando seu blog há algum tempo, seus artigos bem explicados vêm salvando minha vida de aprendiz de blogueira.
    Consegui fazer este tutorial e deu muito certo, gostaria de saber como faço para colocar uma imagem no "postar comentário", como vc fez aqui no seu.
    Obrigada e parabéns.

    ResponderExcluir
  8. olá Áurea, eu não encontro estar parte não amostra no HTML do meu blogger!

    ResponderExcluir

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.