domingo, 1 de maio de 2011

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

Quando você vai comentar em algum post daqui da Web-NT Você já deve ter visto esta imagem  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
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em Baixar modelo completo.
♥ 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.
Veja como está a daqui do Templates para Você
#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;
}



Um comentário:

Comentem e mostre ao mundo que vc faz parte da Web-NT