Balão com Número de Comentários ao Lado do Título da Postagem

Uma forma de conseguir mais comentários no seu blog pode ser mostrar o numero de comentários dentro de um balão ou alguma outra imagem no inicio da postagem, ou seja, ao lado do titulo de cada post do blog. Isso pode ser uma maneira de incentivar os visitantes a deixarem seu comentário ou pelo menos ler o que os outros já falaram sobre aquele assunto.

Leia também:
Como ter Mais Comentários, Mais Visitas
Ganhar Tempo e Conseguir mais Visitas no Blog
Trabalhe Melhor - Organize-se e Ganhe Tempo

Balão com Número de Comentários ao Lado do Título da Postagem
Link do Tutorial da imagem - Paginas extras para o Blogspot

Para fazer essa alteração entre na pagina editar html, marque a opção expandir modelos de widgets e procure por: <class='post-title entry-title'> ou <b:includable id='post' var='post'>. Qual deles usar depende do modelo do seu template geralmente os templates novos usam a primeira opção.

Então logo depois coloque este código:

<span class='post-comment-link-arriba' style='background: url(http://2.bp.blogspot.com/_qgZA1ny_dAs/TAMD0pviQsI/AAAAAAAAEQE/wIJ6xT5MjFA/s400/bubble.png) 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>


Agora vamos falar sobre os ajustes necessários e como >trocar a imagem do bolão nos comentários do blog, veja esse trecho do código:

style='background: url(http://2.bp.blogspot.com/_qgZA1ny_dAs/TAMD0pviQsI/AAAAAAAAEQE/wIJ6xT5MjFA/s400/bubble.png) no-repeat top right; width:48px; height:48px; text-align:center; float:right; padding-top:8px'

Aqui está toda a formatação de texto e posicionamento da imagem, então vamos por partes:

Trocar a imagem de fundo (balão)
background: url(http://2.bp.blogspot.com/_qgZA1ny_dAs/TAMD0pviQsI/AAAAAAAAEQE/wIJ6xT5MjFA/s400/bubble.png) no-repeat top right; width:48px; height:48px;

Isso é a imagem de fundo, então troque o endereço http://2.bp.blogspot.com/_qgZA1ny_dAs/TAMD0pviQsI/AAAAAAAAEQE/wIJ6xT5MjFA/s400/bubble.png pela url de outra imagem que goste mais ou combine melhor com o seu template, você pode achar uma imagem no google, fazer um com um programa para edição de imagens ou achar icones prontos, depois hospede a imagem e coloque o endereço da imagem no código acima. (caso tenha duvidas leia: Imagem não aparece).

Os dois valores 48 é o tamanho da imagem, então deve fazer os ajustes com o tamanho da nova imagem que utilizar.

Posicionar corretamente o número de comentários dentro do balão
padding-top:8px esse é o espaço acima do numero, portanto altere esse valor até o numero de comentários ficarem na posição correta, lembre-se esse código muda a posição no sentido vertical (para cima e para baixo), na direção horizontal está centralizado automaticamente.

Formatação do Numero de comentários (texto)
Para formatar o texto, ou seja, o numero que aparece dentro do balão podemos criar um estilo CSS com o nome post-comment-link-arriba e colocar no inicio do html do blog, junto com o trecho body. Veja Onde colocar os códigos no blog.

html do blogger

Então coloque esses estilos CSS para formatar os links:

.post-comment-link-arriba a{color:#fff;font-size:18pt}
.post-comment-link-arriba a:hover{color:#ff0;text-decoration: underline overline}

Veja aqui como Alterar cores dos links - CSS e também outras opções de formatação de texto

Fizemos esse tutorial depois de receber um cometário falando sobre o assunto, pois em meio a tantos assuntos que já tratamos aqui no Dicas para Blogs esse de colocar o numero de comentários ao lado do titulo do post ainda não tinha sido mostrado. Esperamos que gostem deste tutorial e seja útil para outros blogueiros também.

230 comentários:

  1. é bem mais simples do que pensei

    ResponderExcluir
  2. como q eu coloco link neste balao de comentário ?

    ResponderExcluir
  3. como q coloco link neste balão de comentários ?

    ResponderExcluir
  4. PATRICK
    só precisa colocar outro endereço de imagem no local indicado, veja no tutorial onde está em negrito Trocar a imagem de fundo

    a imagem do balão é a imagem de fundo

    ResponderExcluir
  5. Olá Fabiano !!

    Esta dica é excelente !!
    Já coloquei o balão a algum tempo e realmente me parece que incentiva os leitores a participar !
    Obrigada por compartilhar conosco !

    Um abraço !!

    ResponderExcluir
  6. eu ñ quiz dizer isto ñ. Eu quero saber como q coloco link, assim, quando clico no balaozinho redireciona para fazer um comentario na postagem, que nem ta no balao do seu blog, fiz este comentário porque cliquei em cima do balaozinho e seu site me redirecionou para pagina de comentarios desta postagem.

    ResponderExcluir
  7. o código que mostramos <span class='post-comment-link-arriba.... que faz esse link para a pagina dos comentários

    é muito estranho redirecionar para outro blog... tente retirar o código e depois colocar novamente

    ResponderExcluir
  8. Mto legal ^^ Eu troquei a imagem de fundo e ficou direitinho. Mas o balão não linka para os posts e não consegui mudar a cor da fonte... =/ bjs

    ResponderExcluir
  9. eu consegui colocar o link no balão, para redirecionar + em toda postagem aparece <span class='post-comment-link-arriba...., quer ver, entra no blog e olha como ficou. espacoinformaticaarcos.blogspot.com

    ResponderExcluir
  10. Maira Macri
    veja se copiou corretamente... as vezes na hora de colocar no blog gera algum erro no código.

    mas aparece o numero de comentários?

    ResponderExcluir
  11. PATRICK
    essa parte do código que aparece no seu blog não é para colocar junto com o código do balão...

    a parte da formatação você coloca no inicio do html, perto de onde tem body{... e as outras formatações do blog

    ResponderExcluir
  12. Refiz e o link não funcionou, então coloquei o seu código inteiro, com a mesma imagem de balão - branco - e tb não linka.... Será que tem a ver com o modelo do meu template? Grata pela atenção ^^

    ResponderExcluir
  13. no meu html do blog não tem body{

    ResponderExcluir
  14. Aqui num ta indo nao eu coloquei o codigo fiz o negocio do css tambem so q aqi nao vai ja tentei 2 vezes

    www.ainda-acertaremos.blogspot.com

    ResponderExcluir
  15. ae testei de novo aqui so q com outros navegadores ele so funcionou no internet explorer como faz pra fazer funcionar em todos navegadores?

    ResponderExcluir
  16. gnte como se faz um banner tipo do: rsfd.com.br???
    porfavor me ajudem!!!

    ResponderExcluir
  17. o trecho da formatação é separado do resto do código, veja aqui: Onde colocar os códigos no blog

    já testei o código em varios templates diferentes e funcionou em todos... provavelmente não estão achando o local correto para colocar o código

    ResponderExcluir
  18. não gostei deste negocio, agora como faço para tirar isto do meu blog ?

    ResponderExcluir
  19. boa tarde parceiro....minha pergunta n tem nd haver com o topico...tipow...te um marcador meu que ficou com um numero na frente " Bom Gosto (1)" pq disso ter acontecido?? sabe me explicar pra tirar?

    abraços

    ResponderExcluir
  20. outra pergunta....as vezes qnd entro no meu blog..ele carrega uma parte e na outra fica meio q travado...demora pacas pra carregar...sabe pq isso ta acontecendo? abraços

    ResponderExcluir
  21. Patrick
    para retirar é só achar no seu html os códigos que adicionou e apagar

    ResponderExcluir
  22. Mp3 Samba e Pagode
    sobre o marcador, veja se não é esse o nome do marcador com o 1 e tudo... isso se o numero aparecer somente neste marcador...

    senão pode ser erro do blogger durante a manutenção, então clique para editar os marcadores e selecione para não mostrar esse.

    sobre o travamento isso depende muito dos códigos do blog, pode ser muitos gadgets ou scripts na pagina, erro ao encontrar arquivos externos, enfim tente retirar algumas coisas da sua pagina e isso deve melhorar

    ResponderExcluir
  23. os códigos que eu adicionei no meu html sumiram e mesmo assim aquele trem de arriba.... aparece nas minhas postagens, do Ctrl F para fazer a busca no blog e aparece 0 de 0 ou seja, aparece que estas palavras nao tem, o que faço ?

    ResponderExcluir
  24. *\o/*
    Puxa Fabiano Roberto, o balãozinho ficou lindo, mas ele fica do "lado de fora" da postagem. O meu blog está no "estilo revista" e o balãozinho de comentários ficou antes do título da postagem, entendeu? Acima de cada postagem (título) fica o balão com o número total de comentários naquela postagem... Como faço para que fiquem "dentro da postagem" apenas? Tem como?
    Obrigada!

    ResponderExcluir
  25. Simone Aline
    use margin-left:10px ou margin-right:10px dependendo do lado que deseje mover o balão e altere o valor...

    Patrick
    precisa clicar para expandir o modelo de widgets para achar o código

    ResponderExcluir
  26. Puxa Fabiano, eu de novo... =/
    Mesmo colocando o "margin-right ou left:10px;" não muda... mesmo alterando de 10 para 30, 50... eu mexo no "número" dentro do balãozinho, mas não no balãozinho. Por exemplo, aqui no Dicas, você tem seu balãozinho ao lado do título da postagem. Lá no meu, o balãozinho entra muito acima do título da minha postagem, entendeu? Eu queria "abaixar" ele... Ele está certinho já, a direita... como aqui... mas não ao lado do título da postagem =(
    Me ajuda de novo?

    ResponderExcluir
  27. Fabiano... desculpe, EU DE NOVO!!!! kkkkkkkkkkk
    Qualquer hora vai me "bloquear" aqui!!! E no seu e-mail... rsrs
    Caramba, eu e minha "santa idiotice". Mil desculpas, mas sabe o que eu estava pensando? Que fossem os comentários numerados, entendeu? Agora que entendi (UFA!!! rsrs q vergonha!!!) que é o número TOATL de comentários... Isso ficou uma gracinha, certinho...desculpe! Eu é que "confundi" tudo. Bem, então vou deixar um pedido para uma próxima "dica", tá? Eu queria colocar um código que os comentários ficassem numerados, entende? Por exemplo, o primeiro comentário = balãozinho com nº1. Segundo comentário feito na mesma postagem = balãozinho com nº 2.
    Eu coloquei um código no meu blog, que copiei daqui:
    http://www.elainegaspareto.com/2011/04/como-numerar-os-comentarios-de-seu-blog.html
    Funcionou, ficou uma gracinha, embora não tivesse mais as "fotos" (avatar) de quem havia comentado. =(
    Mas isso foi quando o blogger deu "tilt" e aí quando retornou, retornou sem essa alteração que eu fiz seguindo o tal link. Ao tentar fazer de novo, ele dá erro... não aceita mais esse código. Pq? Tenho como colocar meus comentários numerados de alguma outra forma? Pra fazer sorteios facilita muito!!! =)
    Obrigada.

    ResponderExcluir
  28. Simone Aline
    vou procurar um sistema de numeração de comentários... mas se um deles deu problema talvez demore um pouco pois a maioria dos sites usa o mesmo código para fazer isso...

    mas assim que possivel publicaremos um tutorial sobre isso

    ResponderExcluir
  29. Obrigada, funcionou perfeitamente no meu template ^^

    ResponderExcluir
  30. Fabiano, obrigada! Muito simples de fazer. Já coloquei nos meus blogs.
    Abraços!

    ResponderExcluir
  31. eh jah ateh pensei q pode ser pelos gadget,mais tem tao pouco gadget no blog...script q estou por fora ;/

    ResponderExcluir
  32. Fabiano, o que o Patrick está reclamando aí procede sim. Fiz testes no meu blog teste e tudo que está sendo adicionado nos blogs após aquele último bug não desaparece mesmo que se retire os códigos depois. Coisa muito estranha mesmo. Pra você ter uma idéia, mesmo que você troque o template, o que foi adicionado não desaparece. Só desaparece o que foi colocado antes do bug.

    ResponderExcluir
  33. Deve ser algum problema do blogger mesmo. rsrs
    Sem mais nem menos, o balão sumiu do meu blog teste agora. Vai entender...

    ResponderExcluir
  34. Porreiro, funciona mesmo, até arranjei outro balão alojei no ImageShack e correu tudo ás mil maravilhas como podem ver no

    digital-infor.blogspot.com
    Obrigado pela dica.

    ResponderExcluir
  35. Olá!!!
    Consegui Fabiano! Até que enfim... deve ter sido por causa do "tilt" mesmo, sei lá... mas agora o blogger aceitou novamente! Segui o passo a passo daquele link que te enviei!!! =)
    Os comentários ficaram numeradinhos. Super legal para quem vai fazer sorteios... facilita muito! =)
    A única diferença, é que com os comentários numerados não aparece mais o "rostinho" da pessoa que comentou... =( Antes, todos os comentários tinham a foto do perfil do blogger da pessoa, agora fica apenas o nome =/
    Mas, de qualquer forma, é melhor numerado!
    Bjks!

    ResponderExcluir
  36. Oi Fabiano, acho que te escrevi já... desculpe! É o sono... =)
    Te falei que consegui colocar os comentários numerados, não falei? rsrs Bem, enfim, consegui!
    Mas queria que me tirasse mais uma dúvida:
    De 1 até 200, ele vai certinho... depois do 201 em diante, ele começa no 1 novamente... (?)
    É alguma coisa que eu possa alterar no código?
    Me ajuda?

    ResponderExcluir
  37. Simone Aline
    não tive problemas com postagens com mais de 200 comentarios, veja o link Como fazer um banner, está com 217 comentários e funcionou normalmente

    ResponderExcluir
  38. Oi, Fabiano!!!
    Ameeeeeeeei essa dica, até coloquei no meu blog:
    http://docesonhodemenina.blogspot.com
    Uma dica legal, não só para o botão dos comentários como para as demais imagens é utilizar o editor de imagens do http://photobucket.com/?src=wap , ele me ajudou bastante... Não só em hospedar as imagens, como em pesquisá-las, até por textos com glitter!!!
    Mil Sweetkisses.

    ResponderExcluir
  39. gostei muito ja coloquei no meu blog e adorei o site

    ResponderExcluir
  40. Eu consegui.
    Depois de muito tempo, ate risquei a tela para mim nao me perder, e eu consegui.
    obrigada e eu amo seu site me ajuda muito.

    ResponderExcluir
  41. Dá para mudar a cor do balão?

    ResponderExcluir
  42. Aline
    para mudar a cor precisa trocar por outra imagem , veja a parte final do tutorial

    ResponderExcluir
  43. Eu tentei, mas aparece apenas metade da imagem.

    ResponderExcluir
  44. Eu já tirei os códigos do balão, mas ele não sai!

    ResponderExcluir
  45. veja no código o trecho width:48px; height:48px; , você deve ajustar aqui o tamanho da imagem que está usando. esse é o motivo que aparece somente uma parte da imagem

    ResponderExcluir
  46. Olá, gostei da dica, já coloquei no blog, mas os comentários não aparecem no balão, fiz algo de errado?

    @pah_aleksandra

    ResponderExcluir
  47. Pah
    deve ter colocado algo errado na hora de colar o código... as vezes falou uma letra.. sinal... qualquer detalhe faz o código não funcionar

    ResponderExcluir
  48. Eu já ajustei o tamanho mas a imagem não muda

    ResponderExcluir
  49. o que muda é o espaço disponivel para a imagem... use os mesmos valores do tamanho da imagem para que ela apareça completa

    ResponderExcluir
  50. oi eu fiz isso mas olha como ficou o meu
    www.thaispreifzv.blogspot.com
    ficou la no canto tem como eu colocar juntinho de cada postagem?
    bjss
    me add thaispreifz2011@hotmail.com

    ResponderExcluir
  51. bah me compliquei pq tem aquele read more no meu olha so
    www.thaispreifzv.blogspot.com
    me add thaispreifz2011@hotmail.com
    fico tudo torto no meu :(

    ResponderExcluir
  52. Thaís Preifz
    seu template é bem modificado.. por isso deu o erro... seria necessário fazer testes diretamente no seu blog para achar o local para colocar o código... e talvez nem seja compatível com seu template

    ResponderExcluir
  53. O fundo que escolhi não funciona, o que eu faço?

    ResponderExcluir
  54. Tem como fazer ficar 73x73? Pois a imagem que gostei, não concigo diminuir

    ResponderExcluir
  55. só precisa colocar o 73 no lugar do 48 no código e a imagem aparecerá completa

    ResponderExcluir
  56. Amigo estou aqui mais uma vez pra pedir sua ajuda, bom eu quero modificar na pag inicio o botão de comentários,tipo o meu esta quase como o seu, ai o que eu quero, padronizar ele com uma imagem, mais sem deixar de contar os comentários entende ?
    de já agradeço a ajuda.

    ResponderExcluir
  57. Bebé
    é só usar os códigos deste tutorial para colocar o balão... a imagem você pode achar uma ou fazer num editor de imagens

    ResponderExcluir
  58. Olá, foi muito simples colocar o código! Adorei mesmo!
    PORÉM, estou tendo problemas para criar o tal link.

    Não consigo transformar o número nem em link e nem mudar a cor dele, apenas o tamanho.

    Será que pode me ajudar?
    Esse é o meu blog:

    http://thesoulwolf.blogspot.com
    http://thesoulwolf.blogspot.com
    http://thesoulwolf.blogspot.com

    Veja meu caso e se puder me ajudar por favor me responda, serei muito grato!
    Adoro seu blog, me ajuda em muitas coisas!

    Att,
    Gabriel - TheSoulWolf

    ResponderExcluir
  59. Gabriel "Wolf" Di Stasio
    já tentou retirar o código e colocar novamente? deve ter ocorrido algum erro na hora de copiar e colar... as vezes acontece ao copiar um código de uma pagina para outra na internet

    ResponderExcluir
  60. ou então tem algum código em conflito.. pois olhei o seu html e o meu (aqui no dicas para blogs) e estão iguais os códigos era para funcionar

    ResponderExcluir
  61. esse post rendeu né.. rss

    então, deu tudo certo, peguei uma imagem de balão, alinhei e o número tá lá, bonito. o único "detalhe" é que não dá pra clicar e comentar" só aparece como figura... além do mais, a parte do link de comentários tradicional do blogger continua abaixo da postagem. como proceder??

    obrigada e parabéns pelo post!

    ResponderExcluir
  62. o curioso é que ele funciona tranquilo no Explorer, mas no Mozilla não O.o

    ResponderExcluir
  63. Jessica Moraes
    o link leva para o inicio dos comentários... se o código fosse diferente não funcionaria para qualquer tipo de comentario (pop up, incorporado...)

    ResponderExcluir
  64. Alguem pode me falar como eu faço para fazer a imagem em si redirecionar para os comentários?

    Sem ter que colocar um texto em cima. Simplesmente clicando na imagem que eu escolhi a pessoa é redirecionada para os comentários!

    ResponderExcluir
  65. para colocar só uma imagem tente usar o código deste jeito: <b:if cond='data:post.allowComments'>

    <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><img src="endereço da imagem" border="0" /></a>

    ResponderExcluir
  66. Oi, Fabiano, boa noite.

    Fiz tudo certinho, mas não o "balão" do comentário não linka com o comentário. Não sei o que houve. Os números aparecem direitinho, mas não dá para clicar dentro e ir para o comentário. Poderia me ajudar?

    Grata, obrigada e parabéns pelo site.

    ResponderExcluir
  67. Olá, Fabiano.

    Eu fiz tudo direitinho, cheguei até a trocar o balão por um arco-íris. Mas se clicar dentro não linka para os comentários. Poderia me ajudar? O blog é amadavi.blogspot.com

    Obrigada, e parabéns pelo site, tem ajudado muito.

    ResponderExcluir
  68. Perfeito isso.
    mudei a imagem
    vejam como ficou

    www.studiumcapelli.blogspot.com

    ResponderExcluir
  69. no meu funcionou direito tudo, mas não entendi muito como faz para mudar a fonte, pode me ajudar? se sim, responda, por favor, no meu blog: gidieguez.blogspot.com
    obrigada *-*

    ResponderExcluir
  70. Fabiano.
    como que coloco link para quando alguem clica no balaozinho redireciona para fazer um comentário na postagem,
    brigado

    ResponderExcluir
  71. é estranho isso que está acontecendo.. varias pessoas disseram que não funciona o link, mas nos testes que fiz funcionou normalmente.... tanto que estou usando aqui no dicas para blogs

    tente retirar o código e colocar novamente

    ResponderExcluir
  72. Uhuul consegui colocar no meu Blog vaaleew pela dica .

    ResponderExcluir
  73. Estou tentando mais não consigo o balão fica cortado pela metade e agora?

    ResponderExcluir
  74. Mônica Ribeiro de Andrade
    se a imagem aparece cortada você precisa ajustar o tamanho dela no código, altere o valores: width:48px; height:48px;

    ResponderExcluir
  75. Não tem link para os comentários :( já coloquei e tirei o código umas 5 vezes, e não vai :/

    ResponderExcluir
  76. Carol
    nas configurações (detalhes) está marcado para mostrar os comentarios?

    não sei porque está dando erro, nos testes que fiz funcionou na primeira tentativa...

    ResponderExcluir
  77. eu encontrei outra maneira!
    cliquem em " Expandir modelos de widgets"
    Apertem "Ctrl+F" e procurem por " class='post-title entry-title'>"
    depois colem o primeiro código de baixao dele!!

    ResponderExcluir
  78. Fabiano, não estou conseguindo mudar a cor do numero de postagens, como eu faço pq eu não achei onde colocar o codigo

    ResponderExcluir
  79. para mudar a cor do link crie o estilo
    .post-comment-link-arriba a{...

    veja no final do tutorial

    ResponderExcluir
  80. Olá Fabiano, suas dicas são ótimas, sempre dou uma passada por aqui. Tentei colocar o balão, na verdade criei uma imagem no PS cs5, só que não consegui mudar a fonte e a imagem não ficou como link para para fazer os comentários o que faço?Obrigado!

    ResponderExcluir
  81. Bia Marques
    vou tentar achar um outro código para fazer esses balões... não sei o que está havendo, quando fiz os testes funcionou perfeitamente o link para os comentários mas muita gente está com esse problema, não sei se são templates personalizados ou alguma outra coisa que está gerando o erro

    ResponderExcluir
  82. Eu outra vez, tenho visto nos blogs um balão como este para a data também ou imagem do lado esquerdo, tem como fazer um post ensinado isso também.
    Grata.
    Bia

    ResponderExcluir
  83. Bia Marques
    estou fazendo testes mas parece que os novos templates não aceitam isso...

    o pior que os códigos estão todos certos

    ResponderExcluir
  84. Oi
    eu fiz tudo direitinho
    do jeito que ta dizendo
    mas não ta funcionando o link
    quando eu clico nno balão não acontece nada
    como faço pra quando eu apertar, ir para os comentários?

    ResponderExcluir
  85. Fabiano, fiz como o @AugustoSandim indicou e deu certo. Agora a imagem é um link.
    Mas eu realmente não entendi, e não consegui, é mudar a fonte e cor do número que aparece no link. Tentei fazer o estilo css que vc indicou no post, mas não altera em nada. Existe outra forma?
    Obrigada!

    ResponderExcluir
  86. Já entendi: a cor e a fonte que estão aparecendo no número são o mesmo do título da postagem. Gostaria que fossem diferentes. Tem como?

    Ah, e reitero o pedido da Bia: um tutorial para fazer um balão, ou imagem do lado esquerdo, para a DATA!

    Obrigada!

    ResponderExcluir
  87. Olá! como eu posso colocar um link no numero?

    ResponderExcluir
  88. por algum motivo nos novos templates a imagem de fundo está retirando o link... parece um erro sem solução por enquanto, mas se quiser mostrar somente o numero de comentários retire o balao, apagando o trecho:

    background: url(http://2.bp.blogspot.com/_qgZA1ny_dAs/TAMD0pviQsI/AAAAAAAAEQE/wIJ6xT5MjFA/s400/bubble.png) no-repeat top right; width:48px; height:48px; text-align:center;

    ResponderExcluir
  89. Olá! Boa tarde!
    Qual o link do balão que vocês usam?

    ResponderExcluir
  90. Finalmente... depois de algumas tentativas... deu tudo certo!

    ResponderExcluir
  91. O AUGUSTO disse tudo!
    Eu tava tentando e dava sempre erro com o link.
    A imagem do balão ficava direitinho, mas o link nunca aparecia dentro do balão. Aí Usei o codigo que o Augusto disse e DEU CERTO.

    Cliquem em " Expandir modelos de widgets"
    Apertem "Ctrl+F" e procurem por " class='post-title entry-title'>"
    depois colem o codigo logo em baixo dele! PRONTO ;)

    ResponderExcluir
  92. Fabiano,
    Eu não consegui trocar modelo do balão, e resolvi deixar o seu modelo mesmo...
    Obrigada!

    ResponderExcluir
  93. Este comentário foi removido por um administrador do blog.

    ResponderExcluir
  94. Fiz tudo como você disse, mas não tem link aquele número de comentários. Clico e não vai pra lugar nenhum. O que há de errado?

    ResponderExcluir
  95. Oi, Gostei muito das dicas, eu estava perdida mas consegui colocar o bendito balãozinho.
    Como outras pessoas, no meu não redireciona, só marca o número de postagens. Ainda tem solução?
    Grata!

    ResponderExcluir
  96. Realmente o que o Augusto Sandim disse dá certo.
    O problema de clicar no número e não te enviar pra página de comentários pode ser resolvido colocando o primeiro código logo após " class='post-title entry-title'>"

    ResponderExcluir
  97. fiz a alteração no tutorial dizendo para colocar o código depois do trecho class='post-title entry-title'>

    ResponderExcluir
  98. Coloquei todo o código bem certinho, mas só aparece a imagem, não da pra clicar nela nem nada... Como resolvo isso ? =S
    Ja li o tópico de erros nos códigos e os lugares certos de se colocar...

    ResponderExcluir
  99. parece que em alguns templates está dando erro... tente colocar o código em outra parte.. por exemplo depois de includable id='post' var='post'

    ResponderExcluir
  100. Olá, Fabiano!!
    Ficou lindo, deu tudo certo, agradeço mais uma vez, vc sabe tudooo.
    Tem como colocar o número em negrito????
    Obrigada!!!!

    ResponderExcluir
  101. Profª Elizabeth (Liza)
    coloque font-weight: bold; neste trecho do código:

    .post-comment-link-arriba a{color:#fff;font-weight: bold;}

    veja mais detalhes aqui:Como Formatar o Texto do Blog

    ResponderExcluir
  102. Fabiano,

    esse código funciona se eu estiver usando o intensedebate??

    ResponderExcluir
  103. nunca testei o código junto com o intesedebate... por isso não sei, mas deveria funcionar

    ResponderExcluir
  104. Fabiano fiz do jeito que tu falou mas não funcionou pelo menos no meu blog.
    Se você poder me ajudar ficarei grato.

    ResponderExcluir
  105. tente colocar o código depois da linha: <b:includable id='post' var='post'>

    dependendo do template só funciona assim

    ResponderExcluir
  106. Fabiano ficou muito bom você mais uma vez me ajudando valeu devido ao meu template ser diferente tive uma certa dificuldade na parte em alterar plano de fundo e tamanho do texto mais consegui.
    Valeu e parabens pelo seu trabalho.

    ResponderExcluir
  107. não enetedi e n achei o local de colocar o CSS

    ResponderExcluir
  108. Fabiano, lembra que eu te perguntei a respeito do link?
    Então coloquei o o código que você deu abaixo o trecho e deu certo
    class='post-title entry-title'>

    ResponderExcluir
  109. no meu layout não tem nenhum dos códigos.

    ResponderExcluir
  110. lurdes, tem que marcar para expandir o modelo para achar os códigos... use o ctrl F

    ResponderExcluir
  111. Fabiano,

    Sou blogueira, e estou lançando um site que ainda esta em configuração, e utilizei o balão, porém não consigo colocar o link que ao clicar no balão entra na pagina doa comentários, como faço?

    Obrigada...

    ResponderExcluir
  112. Juliana Doerner
    veja no tutorial tem duas opções de locais para usar o código, uma delas deve funcionar no seu template... já testou as duas?

    ResponderExcluir
  113. Fabiano não tentei nenhuma, vou ler tudo de novo e ver se acho onde esta mostrando....

    ResponderExcluir
  114. consegui colocar o balãozinho, mas ficou sem link..
    veja só:
    http://secretlifebrasil.blogspot.com

    ResponderExcluir
  115. tentou as duas opções que mostramos no tutorial... uma delas deve funcionar no seu template

    ResponderExcluir
  116. o problema de verdade é que no meu blog so tem um body e nem tem uma chave

    ResponderExcluir
  117. todo blog tem body {...} tente usar o ctrl F

    ResponderExcluir
  118. o que eu encontrei foi este body {

    ResponderExcluir
  119. é depois dele que deve colocar os estilos CSS (formatação)
    .arriba......

    ResponderExcluir
  120. eu acho que ainda não era aquele body n deu certo deixa prá desisto obrigado pela ajuda

    ResponderExcluir
  121. eu fiz tud certinho. mas tipo.
    Tem lá o balãozinho. mas quando passa o mouse,
    não a como clicar nele e direcionar para os comentario...
    que Código eu coloco?

    ResponderExcluir
  122. tem que fazer testes dos dois jeitos que publicamos no inicio do tutorial

    ResponderExcluir
  123. Ola,estou criando um novo layot para meu blog que ainda não esta disponivel pra visualização... estou apenas testando.Tentei por o balão com numero de comentários, fiz tudo certinho porem o balão fica acima do titulo da postagem. ja tentei dimunuir fiz de tudo e não consegui alinhar para ficar ao lado da postagem ao invéz de acima da postagem... vc pode me ajudar? posso enviar a foto com problema pra vc entender melhor.
    lua_marx@hotmail.com meu email

    ResponderExcluir
  124. Olá Fabiano,
    Eu consegui colocar o Balão mais só o que aconteceu foi que não aparece o numero de comentarios, eu li a explicação de como editar mais eu não consegui entender claramente, será que teria como você explicar mais claramente e me passar o codigo que devo publicar no HTML e onde Coloca-lo.
    Obrigado.

    ResponderExcluir
  125. os códigos são esses do tutorial... não tem outra forma de explicar é achar e trocar os códigos

    ResponderExcluir
  126. Amg, como eu tiro o '0 comentários' que fica por extenso mesmo após colocar o balão? Tentei tirar nas opções de postagem mas saiu o número do balão também.

    ResponderExcluir
  127. ow no meu nao ta aparecendo ta aparendo uma mensagem assim'Mais de um item encontrado com o id: HTML23. Os IDs de itens devem ser únicos e exclusivos.
    Error 500' o q faço

    ResponderExcluir
  128. tudo sobre famosos
    use o ctrl F para localizar e procure na pagina editar html, pesquise por HTML23 provavelmente achará duas linhas de código iguais... apague uma delas

    ResponderExcluir
  129. Muito obrigado por esse tutorial!!!
    Meu blog passou por uma mudança de visual recentemente e esse post me ajudou muito a deixá-lo mais legal.
    Valeu pela dica.

    A única coisa que não consegui foi modificar especificamente a fonte do número dentro do balão, sem mexer nas outras fontes do blog.

    ResponderExcluir
  130. "eu encontrei outra maneira!
    cliquem em " Expandir modelos de widgets"
    Apertem "Ctrl+F" e procurem por " class='post-title entry-title'>"
    depois colem o primeiro código de baixao dele!!"Augusto Sandim


    Olá Fabiano.Estava quebrando a cabeça ,mas com esta dica do Augusto deu certo.O código no seu tutorial está certíssimo ,apenas o local para colocar que não está,nem sei dizer o pq.Obrigada e grande abraço.

    ResponderExcluir
  131. Oi Fabiano!!!
    Obrigada pelas dicas tem sido extremamente util para melhorar meu blog... coloquei o balão, mudei a imagem, deu tdo certo... MAS não linka com o quadro de comentários, porém descobri q isso ocorre apenas no mozilla, no explorer funciona normal. Vc já descobriu o q acontece?
    Abçs Andrea.

    ResponderExcluir
  132. Andrea Podavi
    no tutorial falamos de varios lugares onde é possivel colocar o código.. um deles deve funcionar no seu template

    infelizmente tem que testar para saber qual é

    ResponderExcluir
  133. Legal queria uma ajuda tipo o meu blog tá ficando com uma propaganda no canto esquerdo dele vcs poderião me ajudar o meu blog é http://www.pttm-gtasan.blogspot.com meu msn é pttm-gtasan@hotmail.com

    ResponderExcluir
  134. tem que achar o gadget e apagar..

    mas que tipo de propaganda está falando?

    ResponderExcluir
  135. muuuuuuuuuuuito obrigada!!!! n sei oq seria do meu blog sem as dicas de vceS!

    ResponderExcluir
  136. mas como faz pra linkar o balao para os comentarios?! ah... eu achei q jah tinha meu balaozinho de comentarios, mas ele eh soh um balao ainda n tem link... =/

    ResponderExcluir
  137. Carla Carvalho
    no tutorial fala em dois lugares diferentes para colocar o código, tem que testar nos dois porque varia conforme o template o lugar para usar o código e o link funcionar

    ResponderExcluir
  138. Oi Fabiano, adorei o resultado, mas não tem como clicar no numero e redirecionar para os comentários? assim como é possível no seu blog.
    Achei que eu pudesse ter feito algo errado por não estar funcionando, refiz umas 3 vezes, mas continua não funcionando.

    http://www.biscoitofashion.com/

    ResponderExcluir
  139. tentou colocar o ´codigo em outra parte do html.. no tutorial falamos de duas opções

    ResponderExcluir
  140. Fabiano me ajuda, tipo eu já tinha lido aqui nós comentários e consegui, mais agora não achei, tipo coloco o balão tudo certo, mais na hora que clico ali pra redirecionar pros comentários não redireciona. Eu já tinha conseguido só que tinha mudado umas coisas então... PS: eu lembro que você colocou um código aqui nos comentários que funcionou depois de colocar...

    ResponderExcluir
  141. @Alexssandro Costa tem varios lugares no html onde pode colocar o código se não deu certo em um deve tentar em outro.

    ResponderExcluir
  142. Não consigo achar o body {.. no meu blog ;S

    ResponderExcluir
  143. @Fabíola é no começo do html use o ctrl F para achar

    ResponderExcluir
  144. Fabiano, querido, eu fiz isso e do mesmo jeito ainda não achei ... Será que o estilo do meu blog não é muito antigo não ? (i-do-things-admin.blogspot.com)

    ResponderExcluir
  145. Fabiano , consegui ... procurei manualmente e achei .. obrigado por me ajudar ..

    ResponderExcluir
  146. @Fabíola infelizmente o ctrl F precisa ser o código exato para achar, ou seja um ponto ou espaço já dá erro.

    mas o importante é que você conseguiu

    ResponderExcluir
  147. Consegui Fabiano, era o primeiro eu que errei e não expandi vlw!! se quiser passar pra dar uma olhada e ver como ficou > http://ideianoescuro.blogspot.com/

    ResponderExcluir
  148. E como podemos posicionar ele? Exemplo deixar no final etc...

    ResponderExcluir
  149. Aqui não aparece nem o zero... '-' Omg é problema no template?

    ResponderExcluir
  150. Brigaduuuuuuuuu!!!!!!! arrriba!!! funcionou perfeitamente no meu blog cara!! Valeu Fabiano, valeu Augusto!! No começo deu erro, mas depois que o Augusto disse o outro código ficou tri massa véio, valeu mesmo confira:
    http://cinequartotv.blogspot.com

    Esse é o melhor blog sobre dicas para blogueiros!!

    ResponderExcluir
  151. @Lucas Lima tem varios trechos do html onde é possivel colocar o código, tem que fazer testes.

    mas se não funcionar em nenhum pode ser algum outro código do seu template gerando conflito, então não tem como resolver, alias teria se conseguisse achar esse outro trecho, mas é muito dificil achar

    ResponderExcluir
  152. Ok Obrigado! E outro problema também é que na hora de comentar só clicando no titulo da postagem nem na imagem dá... Avalie?
    http://www.prantamalefica.net.tc

    ResponderExcluir
  153. seu template é bem modificado então é dificil achar os códigos nele...

    mas pode tentar colocar o código que mostramos procure só pelas palavras e não a linha inteira

    post-title entry-title ou id='post'

    ResponderExcluir
  154. Ah bem. Ok obrigado Fabiano, mais uma vez ;D

    ResponderExcluir
  155. Cool, eu tenho isso no meu blog e parece estar funcionando. Ela encoraja as pessoas a começar comentando, impressionante :).

    Alex

    ResponderExcluir
  156. Muito bom o tutorial, coloquei ele no meu novo layout! :)

    Eu queria saber: Tem como ele não aparecer nas páginas estáticas do blogger?

    ResponderExcluir
  157. @Dymas alterar paginas especificas é bem complicado em códigos prontos como é esse caso.

    ResponderExcluir
  158. eu consegui por o balão mas ele não linka aos comentários..

    ResponderExcluir
  159. @Lore veja no tutorial tem varias opções de lugares para colocar o código. você deve tentar em todas porque para funcionar depende de cada template

    ResponderExcluir
  160. Oie! Sempre tô aqui dando uma olhada nos seus tutoriais. E eles sempre me ajudam! Obg pelas dicas. (:
    Mas, queria saber se tem como tirar o nome "comentários" abaixo da publicação!? Eu coloquei o balão mas embaixo ele continuou.
    Abraço.

    http://pontovirgulajc.blogspot.com/

    ResponderExcluir
  161. na pagina layout tem a opção para editar as postagens e lá você escolhe o que mostra ou não no blog.

    é só desmarcar a opção para mostrar o numero de comentarios

    ResponderExcluir
  162. Oi Fabiano, tudo bem?
    Instalei certinho, ele aparece mas não é clicável.
    Não leva ao formulário de comentários..

    o que fazer?

    ResponderExcluir
  163. no tutorial falamos em varios trechos do html onde é possivel colocar o código então precisa tentar mudar o lugar onde colocou o código.

    isso acontece por causa das divs e estilos CSS que se "misturam e sobrepõem"

    ResponderExcluir
  164. oi fabiano, vi um tutorial em um site (http://soulcollide.blogspot.com/2011/11/data-ao-lado-do-titulo-da-postagem.html) que ensina a por a data ao lado do título, só que fica dentro da área de postagem ainda, assim como nesse tutorial. gostaria de saber como fazer para que a data fique ao lado, mas fora da área do post como no http://www.kristenstewart.com.br/ ... achei que deu um visual bem diferente no site e gostaria de aplicar no meu, help me?

    ResponderExcluir
  165. adaptar tutoriais de outros sites é complicado... principalmente se for para corrigir algum erro.

    não tenho como responder por coisas publicadas em outros blogs

    ResponderExcluir
  166. Muito bom, só falta duas coisas pra ficar completo, como eu faço pra quando clicarem no balão de comentários, o leitor ir ao formulário de comentários, igual aqui? E segundo, como ocultar a palavra "1 comentários", que já vem como padrão no blogger? É que se eu excluir lá pelo "Design>Postagens no blog", o número de comentários do balão também some.

    ResponderExcluir
  167. @Fabiano Roberto

    mais teria como colocar o balão do numero que comentarios que você ensina aqui, fora do campo de postagem? ao lado do título mais como se tivesse sua posição como uma coluna bem ao lado do post

    ResponderExcluir
  168. Roger
    você pode usar esse tutorial: Corrigir plural ou alterar a palavra "comentarios" do blogspot

    para achar o código dos comentarios então se não quiser que mostre é só apagar mas salve uma copia do seu template antes de alterar para poder voltar ao seu modelo em caso de erros

    sobre o link tem varios lugares no html onde pode colocar o código então precisa testar porque em alguns templates não dá certo

    ResponderExcluir
  169. Jessi Potter
    seria preciso alterar diretamente no seu html para ajustar do jeito que falou, mas não fazemos serviços de personalização de templates no momento por falta de tempo

    ResponderExcluir
  170. Fabiano eu exclui a parte que mostrava no tutorial, mas aí o Blogger não aceita, acontece o erro 500.
    No seu tutorial de colocar o balão com o número de comentários, não fala como se faz pra quando o leitor clicar no balão, ele vir para o formulário de comentarios, igual aqui no Dicas para Blogs, eu queria que o meu balão também fizesse isso, quando a gente põe o mouse sobre ele aparece a mensagem: "Comentários dos Leitores", e quando clica, ir ao formulário de comentarios.

    ResponderExcluir
  171. O meu aparece, mas somente para o padrão blogger. Os comentários feitos a partir do IntenseDebate não são contabilizados.

    Parabéns pelo blog!

    ResponderExcluir
  172. Roger
    o código está certo mas infelizmente não funciona em todos os templates

    era para o numero ser um link como é aqui em nosso blog

    ResponderExcluir
  173. Funciona perfeitamente no IE, mas no Mozila não funciona a parada do link para comentar.

    Uma pena, eu tinha gostado da idéia...

    ResponderExcluir
  174. veja que você pode colocar o código em varios trechos do seu blog como falamos no inicio do tutorial

    então precisa testar em varios para descobrir em qual deles funcionará corretamente no seu template

    ResponderExcluir
  175. Oiee entao o meu nao ta dando o link, nem mesmo o mumero ta aparecendo olha: http://blogdetestedakaniexd.blogspot.com/ esse e o meu blog de test enfim

    ResponderExcluir
  176. @Kanie Strausckiiz tente mudar o lugar onde colocou o ´codigo

    veja que no inicio do tutorial tem duas opções e depende de cada template achar o lugar certo porque os novos modelos tem muitos estilos CSS que se "sobrepõem"

    ResponderExcluir
  177. Oi Fabiano

    coloquei mas só aparece a figurinha do balão com o número. Qdo clico em cima do balão ele não linka para a caixa de comentários. Ficou só uma figura que tem os números atualizados. Como faço para que ele leve a pessoa para a caixa de comentários?

    obrigada
    Dâmaris

    ResponderExcluir
  178. depende do template o lugar de colocar o código... precisa fazer testes

    ResponderExcluir
  179. PESSOAL,
    Uso template do Novo Blogger e também estava com este problema. Li todos os comentários aqui e nada. Então fui testar no meu blog mudando a posição deste código que o "dicasprablogs" fornece.

    COLEM O CÓDIGO APÓS este código

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


    Tirem estes ** que tive que colocar pra conseguir postar aqui

    DÁ CERTO!!
    http://mulheresqueusam.blogspot.com/

    ResponderExcluir
  180. eu quero um igual o seu.
    você poderia me dar o código do seu?

    ResponderExcluir
  181. é o código deste tutorial que usamos

    ResponderExcluir
  182. Oi.. gostaria de uma ajudinha, depois q instalei o intensedebate o meu balão de comentarios não está somando a quantidade de comentarios, fica sempre zerado, o que devo alterar no html

    ResponderExcluir
  183. @GI MATOS o intense debate conta os comentários de outra forma(fora do blogger). acho que não tem como usar o balão

    ResponderExcluir
  184. olá, gostaria de saber como fazer esse balão de comentários funcionar com o sistema de comentários que coloquei no meu blog recentemente aparecendo o número de comentários feitos pelo facebook. espero que responda logo!

    ResponderExcluir
  185. esse código do numero de comentários no balão é só para comentários do blogger e não tem como incluir os comentários do facebook nele

    ResponderExcluir
  186. esse poste tem 193 Comentários:

    tenho um poste que tem 250 comentarios mais tipo sabe opção comentario recentes n aparece no meu blog mais pq sera?? ai n da pra ver todos os comentarios entende

    ResponderExcluir
  187. Roger
    notei esse erro em alguns posts com mais de 200 comentários, acho que é por causa das mudanças nos comentarios que o blogger fez essa semana.

    mas infelizmente ainda não sei como corrigir isso

    ResponderExcluir
  188. Oi Fabiano, achei um tutorial que você poderia publicar aqui no blog, http://ajudanoblogger.blogspot.com/2011/09/colocando-sistema-de-comentarios-do.html

    e tbm, ja que você é mais experiente, vc poderia testar, pois não estou conseguindo

    ResponderExcluir
  189. Jessi Potter
    obrigado pela sugestão, vou olhar o link.

    mas vou aguardar mais alguns dias para publicar algo sobre comentarios por causa das mudanças que o google está fazendo desde a semana passada: Como Ativar a Opção Responder Comentarios no Blogger

    ResponderExcluir
  190. Nossa, Adorei o post...
    Apliquei no meu blog, não gostei muito de cara, mas fui trocar a imagem do balãozinho...
    Fiz um no Paint!!!
    Encaixou-se como uma luva no meu blog.
    Muito Obrigado Mesmo..

    Aqui vai a dica:
    Faça um balãozinho no paint, pois assim o seu gosto vai mandar mais do que tudo!, ou seja, seu trabalho vai se encaixar perfeitamente no seu blog.


    Se alguém Quiser ver como ficou o balão que eu fiz, acesse:
    http://risadinhas-blog.blogspot.com

    MUITO OBRIGADO Equipe Dicas para Blogs !!!!

    ResponderExcluir
  191. Adorei a dica, mas o meu balão ficou separado do número, no total ficou um balãozinho pequeno, o número no meio e o balão maior do outro lado.. como faço para ajustar a largura dele? Obrigada!

    ResponderExcluir