• Acessórios

  • Layouts para blog

  • kits de imagens

  • Goodies

  • Layouts free

  • NOME DA FOTO OU TEXTO

7 de janeiro de 2012

Balão de comentários




O balão de comentário fica logo ao lado do título da postagem informando quantos comentários essa postagem já recebeu.
Primeiro vá em Design, escolha EDITAR HTML, agora marque a opção expandir widget.
Clique na imagem para ampliar.


Agora clice as teclas Ctrl+F para abrir a caixa de pesquisa e procure por: <b:includable id='post' var='post'> Em destaque aparecerá o resultado da sua pesquisa, clique na imagem para ampliar.

Agora coloque o código logo abaixo de: <b:includable id='post' var='post'>
<span class='post-comment-link-arriba' style='background: url(endereço da sua imagem aqui) no-repeat top right; width:48px; height:48px; text-align:center; float:right;padding-top:8px'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/></b:if></a>
</b:if>
</span>

Note que a parte destacada em vermelho é o local onde você deve inserir o endereço da imagem do seu balão, para conseguir esse endereço basta você escolher seu balão aqui nessa postagem, clique sobre ele que a imagem abrirá em outra página. Copie o endereço na barra de link e copie clicanco Ctrl+C depois você retorna ao código e entre os parênteses () você tecla Ctrl+V.
A parte que está destacada em azul mostra a largura e altura do seu balão, você pode ajustar se acaso sua imagem ficar cortando. Aqui no meu blog eu usei 60px, 58px. Mas em outros casos já usei até valores bem maiores.
Depois tem que fazer esse outro passo:
Pesquise novamente na caixa de pesquisa: }]]></b:skin>
Colocar abaixo do estilo body, mas eu coloquei antes de }]]></b:skin> e deu certinho:
.post-comment-link-arriba a{color:# fefbfc;font-size:18pt}
.post-comment-link-arriba a:hover{color:#
 fefbfc;text-decoration: underline overline}
Agora vá até o final da página e clique para visualizar, só salve depois que estiver do jeitinho que você quer.
Aqui deixo as imagens dos balões para que você escolha a que melhor combina com seu blog, caso queiram em outras cores é só me pedir por comentário.
 
 
 
Se restar alguma dúvida estarei aqui e farei o possível para ajudar. 

Créditos : 

8 comentários:

  1. Olá muito obrigada pelo tutorial, amei.Estou com uma dúvida, os números de comentários aparecem mais o balãozinho não o que estou fazendo de errado, eu coloquei o link do balão que escolhi, duto certinho.
    Ele tem que ficar entre os parentes?Ou não?

    ResponderExcluir
  2. Flor ele tem q ta dentro do parentes p poder da certo ^^

    ResponderExcluir
  3. Flor, eu fiz o tuto o balão apareceu e td até peguei um modelinho dos seus só que 'nenhum comentário' fica aparecendo embaixo do mesmo jeito que estava e o balãozinho lá em cima igual vc explicou como faço pra tira esse de baixo e fica só o balão::
    BJooO!

    ResponderExcluir
  4. O meu aconteceu o mesmo problema só aprece o numero ..

    ResponderExcluir
  5. Meninas vi q ja resolveram os probleminhas obrigada pela visita bjosss

    ResponderExcluir
  6. Respostas
    1. abri a imagem dele em outra guia e copia a url dele no navegador, bjosss

      Excluir

Deixe seu link nos comentários que irei retribui a visitinha ^^

Related Posts Plugin for WordPress, Blogger...