Comentários dentro de um balão

em 31 de julho de 2013


A dica de hoje é muito simples e fácil de seguir, e dá um efeito bem bonitinho em nossas postagens.
Trata-se do número de comentários que cada postagem tem dentro de uma imagem.
Pode ser um balãozinho, ou um ícone qualquer que combine com seu blog.
Veja no exemplo:
 
Vamos aprender?
Para começar ouça meu conselho: faça antes em um blog de testes.
Ou se quiser tentar direto em seu blog faça backup dele antes.

Aprenda aqui como fazer backup de seu blog


Agora clique na aba Modelo e a seguir clique em Editar html.
Tecle Ctrl+F dentro da caixa de código e na barra de busca que abrir cole isso:

<b:includable id='post' var='post'>>


Dê Enter para localizar. Caso não encontre tente isso:

<class='post-title entry-title'>


Assim que achar cole este trecho abaixo da linha que encontrou:

<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:post.numComments/></a></b:if>

Agora, dentro da caixa de busca cole isso:
 ]]></b:skin>

Tecle Enter e acima da tag localizada cole isso:

 .comment-bubble {
float: left; /* posicionamento à direita*/
width : 78px; /*largura da imagem do balão*/
height : 83px; /*altura da imagem do balão*/
background : url(ENDEREÇO DE SUA IMAGEM) no-repeat;
font-size : 30px; /*tamanho da fonte do número de comentários*/
margin-top: -19px; /*margem em relação ao topo, ajuste  se precisar*/
 margin-left: 10px; /*margem em relação ao lado esquerdo, ajuste  se precisar*/
padding: 3px; /* espaçamento interno*/
text-align : center; /*texto centralizado*/
}

Clique em Visualizar e se estiver ok salve as alterações.

Dica extra:
Para ajustar os números dentro do balão lembre-se que em margin-top números negativos sobem e positivos descem.
Em margin-left números positivos vão para a direita e números negativos vão para a esquerda.

Brindes para você

Fiz alguns ícones para você usar caso queira.
Salve os que desejar, hospede-os em seu próprio blog (aprenda aqui como hospedar imagens no próprio Blogger) e use-as para personalizar seu blog.








Pode usar à vontade mas por favor não reblogue.Se quiser divulgar faça isso com um link para esta postagem.

Se usar diga nos comentários. Sempre gosto de ver...

Conheça a web-série Como personalizar o blog

  1. Como criar um blog: criação da conta Google e criação do blog
  2. Trocar o plano de fundo do blog e alterar largura e disposição das colunas
  3. Centralizar o nome do blog, os títulos dos posts e dos elementos de página (gadgets);
  4. Alterar cores e fontes dos títulos e do texto (fontes especiais, manuscritas, etc);
  5. Criar um menu com abas abaixo do cabeçalho e inserir links nele;
  6. Inserir assinatura personalizada;
  7. Colocar Voltar ao topo com efeito deslizante;
  8. Personalizar os comentários do blog (numerar, separar, incluir opção Responder, etc)
  9. Data dos posts em formato calendário
  10. Número de comentários dentro de um balão  

Gostou e quer ter em seu blog mas não conseguiu fazer ou não tem tempo e paciência para tentar?
Entre em contato comigo e por um valor simbólico eu faço para você!

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

42 comentários , comente também!

  1. Oi Elaine!

    Que bonitinhos esses balõesinhos! adorei!
    Hummmm, acho que vou querer um desses...

    Beijos, Renata
    palpitandoemtudo

    ResponderExcluir
  2. Ah muito fofinhas as imagens, adorei.
    Talvez coloque em meus blogs.
    Obrigada.
    Beijos querida.

    ResponderExcluir
  3. Oi Elaine,

    Que gracinha :)
    Vou tentar fazer!

    Beijos

    ResponderExcluir
    Respostas
    1. Oi Elaine,
      Tentei fazer mas não ele não encontra os códigos =/

      Bjs

      Excluir
    2. Oii Elaine,

      Tbm tentei mas não encontra os codigos :(

      Excluir
    3. eu também, não encontrou nenhum dos códigos que eu procurei.

      Excluir
    4. Gente, eu fiz e o primeiro código está errado !! Procurem por

      Excluir
    5. Para resolver isso é só retirar a última flechinha ">".
      E em vez de "left", no 5º código, linha 2, coloque "right".

      Excluir
  4. amei todos !! mas não sei mexer muito bem em meu blog :( vou tentar e te conto :)

    ResponderExcluir
  5. Menina ! Estava mesmo querendo algo assim. Mas vou pedir ajuda para um amigo, antes de usar. Depois te conto. Obrigada !

    ResponderExcluir
  6. Amei achei muito fofos‼ Eu salvei este post nos favoritos.

    ResponderExcluir
  7. Gostaria de colocar no meu blog, mas quando coloco em html não acontece nada. Meu blog precisa passar por uma revisão rigorosa!!
    Abraços...

    ResponderExcluir
  8. Oi Elaine,
    Sempre vejo as dicas que você nos dá e até uso algumas. Adoro o jeito como você faz, tudo muito explicadinho, e toda a generosidade em nos passar esses segredinhos.
    Tentei colocar a imagem nos meus comentários, mas uso aquele nativo do blogger, no rodapé do post, e nada aconteceu. Na verdade, uma imagem de "carregando" ficou no fundo sob o post (aparecendo só um pedaço) e o número no topo, ao lado do título da postagem. Meu modelo deve estar diferente...
    Ainda assim, vou salvar aqui o seu post e em outra ocasião tentarei novamente.

    Beijos

    ResponderExcluir
  9. Olá, eu também faço layouts para blog só que aconteceu uma coisa comigo hoje que me deixou intrigada.
    No balão de comentarios não atualiza os comentários. Exemplo: 5 pessoas comentaram mais no balão continua 0 você sabe me explicar o porque ?

    Beijos e Obrigada!

    ResponderExcluir
  10. Oi Elaine,te agradeço por partilhar este tuto e já estou usando,bjs.
    http://ateliecasaepresentes.blogspot.com.br/

    ResponderExcluir
  11. Já tentei de todas as formas fazer isso ai e nunca consigo sempre dar errado tento procurar o cond como vc ensina mais nunca acho ñ sei mais o que fazer...

    ResponderExcluir
  12. Olá Eliane, eu fiz e apareceu, mas eu gostaria de saber qual é o correto, aparecer a caixa do lado do título ou fiz algo errado, e também não consigo arrumar o número dentro da caixa: http://alinezanatta.blogspot.com.br/2013/08/decoracao-caixas-coloridas.html
    Meu blog.

    ResponderExcluir
  13. Olá, Elaine, eu tentei, mas não achei nenhum dos códigos.
    Me ajuda!

    http://seproduzindo.blogspot.com.br/

    Obrigada.

    ResponderExcluir
  14. Oi Elaine amei a dica mas nao consegui fazer :(
    o meu blog nao encontra nenhum desses dois codigos

    ResponderExcluir
  15. Elaine, fiz esse tutorial porém agora que quero voltar aos comentarios como era antes não consigo, eles somem se tento desfazer...é que, coloquei os comentarios no rodapé do blog mas fiz algo mais e não to conseguindo achar de jeito algum, me ajuda?

    ResponderExcluir
  16. Ai que droga, não consigo achar nenhum dos dois códigos :/ E já procurei tanto como fazer isso e não acho... No meu layout já tem um local no fim do post pra comentar, mas tem outro problema que nunca contabiliza, fica sempre em "nenhum comentário", se poder me ajudar! Beijinhos!

    http://primaverafeminina.blogspot.com.br/

    ResponderExcluir
  17. Olá... há algum tempo visito seu blog, e sempre gostei muito! Mas por falta de tempo nunca dava para comentar, hoje resolvi comentar! Estava procurando por este tutorial já faz tempo! Encontrei esta postagem que me ajudou bastante! Obrigada por sempre estar disponibilizando estes tutoriais sempre muito bem explicados que sempre nos ajuda!
    Beijos!
    http://tdabella.blogspot.com.br/

    ResponderExcluir
  18. Olá Elaine! Tentei fazer no meu, mas ele não encontra nenhum dos dois códigos. Há um outro jeito de fazer?
    Beijinhos e sucesso linda!
    http://dulcineiadesa.blogspot.com

    ResponderExcluir
  19. Ola tudo bem!
    Queria saber se tem como colocar no fim do post e não no começo.
    Abrigada.

    ResponderExcluir
    Respostas
    1. Viviane, esse código não, vou ver se posto outro em breve.
      bjssss

      Excluir
    2. Oi vivi, eu coloquei no fim do post o meu, pois não gosto em cima, mas para isso você precisa ter conhecimento em html para saber os locais onde colocar cada código, no meu caso só peguei o código para base mesmo!

      Excluir
  20. Oi Elaine, boa tarde! Eu tentei colocar no meu porém o número apareceu no topo da página e não no fim. Você sabe me dizer o que eu fiz de errado?

    Obrigada.

    ResponderExcluir
  21. Olá, Eliane gostaria de um tuto que ao invés do lado da frase: Nenhum comentário ou ... comentários em baixo da postagem pudesse colocar 01 frase. Obrigado, Tiça

    ResponderExcluir
  22. Oi Elaine,
    Estou procurando personalizar esse campo no meu blog, mas gostaria que o balão ficasse no final da postagem e não ao lado do título, você poderia fazer um tutorial assim?
    Beijos.

    ResponderExcluir
  23. Elaine, não consegui encontrar nenhum dos dois codigos por isso que eu não fiz no meu :(

    Mesmo assim thank pelas dicas :D

    ResponderExcluir
  24. Elaine, os comentários continuam mesmo aparecendo o balãozinho aparece do outro lado o número de comentários comum!

    ResponderExcluir
  25. Nossa! Muito bom! Tava o dia todo procurando isso!
    Obrigada!
    Beijos!

    www.no-coracao.blogspot.com

    ResponderExcluir
  26. Nao to conseguindo achar os codigos :(

    ResponderExcluir
  27. Fiz e ficou lindo, peguei um dos balões para fazer ! Obrigada pelo tutorial !
    Bjoos

    ResponderExcluir
  28. Fiz essa e outras dicas em que deu em seu blog, e meu blog está quase como quero ! Beijos elaine, você me ajudou muito :)

    ResponderExcluir
  29. Oi eu queria saber como arrumar pq o meu ficou feio e nao sei reverter....fiz passo a passo
    bjs

    ResponderExcluir
  30. tem como fazer pra mim?
    http://www.pinkbelezura.com/

    ResponderExcluir
  31. Oiee, eu tentei colocar, mas na hora de copiar e colar os códigos ele não seleciona o texto... O que eu faço?

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…