Número de comentários dentro de um balão

24 de jan de 2013

Atualização: Gente, perdão! Eu errei um código e por isso vocês não estavam achando rsrsrs Já arrumei, então tentem de novo que agora tem que funcionar! :)
Tumblr_lxkut8dfbj1qc7i0zo1_500_large

Gente, vocês não tem noção de como esse tutorial foi pedido desde que troquei o layout! Me surpreendi pelo fato de terem me pedido tanto, porque esse tutorial é bem conhecido e já visto em vários blogs. Mas tudo bem, já que pediram, vim aqui trazer!

É bem simples, entre no seu HTML e busque (Ctrl+F) por ]]></b:skin>

 Acima dele coloque o código abaixo, substituindo a parte destacada pela url do seu modelo de balão.

.comment-bubble {
float: left; /* posicionamento a direita, pode mudar para right*/
width : 78px; /*largura da imagem do balão*/
height : 83px; /*atura da imagem do balão*/
background : url(http://migre.me/cXyq7) no-repeat;
font-size : 32px; /*tamanho da fonte do número de comentários*/
margin-top: -19px; /*margem em relação ao topo, ajuste o nº se precisar*/
margin-left: 10px; /*margem em relação ao lado esquerdo, ajuste o nº se precisar*/
padding: 3px; /* espaçamento interno*/
text-align : center; /*texto centralizado*/
}
 Lembre-se que em margin-top números negativos sobem e positivos descem. Já em margin-left números positivos vão para a direita e negativos para a esquerda. 

Visualize e se estiver tudo certo salve. PS: O balão ainda não vai aparecer. 

Agora marque a caixinha "Expandir modelos de widget" e procure por :
<b:includable id='post' var='post'>
Abaixo dele coloque o seguinte código :
<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 visualize, e se o balão tiver certinho, salve.

Balões (se usar credite):


 

Espero que tenham gostado, como podem ver o tutorial é bem simples, então se não conseguirem tentem novamente. Kisses :*

122 comentários:

  1. Um ótimo tutorial >.< E é bem procurado mesmo.

    Bjs.

    ResponderExcluir
  2. Amei,ja estou usando no meu blog ^^

    beijos, http://insanelikesky.blogspot.com

    ResponderExcluir
  3. Adorei era esse que estava faltando para meu blog *--*

    ResponderExcluir
  4. Este comentário foi removido pelo autor.

    ResponderExcluir
  5. Ficou ótimo...obrigada pela dica, abraços.

    ResponderExcluir
  6. Este comentário foi removido pelo autor.

    ResponderExcluir
  7. O último códico para ser colocado eu nao acho no meu html oq faco???

    ResponderExcluir
    Respostas
    1. tambem não achei.. (???)

      Excluir
    2. tenta clicar em "expandir modelos de widget", pode estar lá :)

      Excluir
    3. Tb já fiz isso, sempre quando eu nao acho eu clico em expandir mas nao ajudou... tem a ver com o template? O meu é de Viagem.

      Excluir
  8. Sabe se dá para por no template Minima? Obrigada, eu adorei o tutorial! Muito criativo, amei mesmo <3

    Beijos
    too-kawaii

    ResponderExcluir
  9. Ótimo tutorial *-*
    cr4zy-world.blogspot.com.br

    ResponderExcluir
  10. lindo demais as imagens, nunca vi mais linda. bjs Danny Toledo

    ResponderExcluir
  11. Este comentário foi removido pelo autor.

    ResponderExcluir
  12. caramba, é lindo, e seu novo layout é maravilhoso tbm!
    vou tentar fazer esse tutorial, porque é lindo e magnífico!
    amei!

    Adolescente Nerd

    ResponderExcluir
  13. Oi, tem um(ns) selinho(s) pra você no meu blog

    http://sorrisomet4lico.blogspot.com.br/2013/01/novos-selinhos-para-o-blog.html

    Beijos!

    ResponderExcluir
  14. Amei o tutu!
    E os balões!
    Vou pôr no meu blog!
    Linda, hoje é aniver de 3 meses do P.A.S.!
    Dá uma passadinha lá responde a enquete e comenta!
    Temos lay novo!

    Bjinhos Vick♥//Princesa de All Star

    ResponderExcluir
  15. --> http://princesadeallstar-vick.blogspot.com.br/

    ResponderExcluir
  16. E como faço para colocar a data nessa bolinha? bjus

    ResponderExcluir
    Respostas
    1. já fiz o tutorial, dá uma olhadinha na página Goodies :)

      Excluir
  17. Anny só não achei aquele codigo "h3" e não consegui colocar se puder me ajudar agradeço :))

    ResponderExcluir
    Respostas
    1. Olá! Eu errei aquele código, já atualizei o post com o certo. Peço que tente de novo :)

      Excluir
  18. Amei o tuto do seu blog eu amo o Go Imagine S2

    ResponderExcluir
  19. Nossa,procurei feito louca por esse tuto,e encontrei aqui de uma forma tão simples.Testei e funcionou perfeitamente,vou usar um desses balões em meu próximo layout,e claro darei os créditos.Seguindo aqui,pode seguir o meu?
    http://barbieseumundopink.blogspot.com.br/
    Abraços!

    ResponderExcluir
  20. Funciona em comentários dos disqus?

    http://returningtodarkness.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Não sei linda, mas não custa tentar né :)

      Excluir
  21. Eu fui uma dos que pediram esse tutorial! Amei, muito mais simples que eu pensei. Dá até para trocar a imagem do balão por algo simples personalizado pela html, já que sou péssima editando imagens e nenhuma dessas combina com meu próximo lay. Beijos!

    ♥ blogthistime.blogspot.com

    ResponderExcluir
    Respostas
    1. Isso ai linda, fica legal mesmo com css só! :)

      Excluir
  22. Este comentário foi removido pelo autor.

    ResponderExcluir
  23. Minha amiga foi uma das que pediu ^-^
    Adorei o tutorial , você poderia fazer um sobre como personalizar a caixinha de comentários ? ( não sei como chama )
    Seguindo fofa :3 Beijos

    site : isastrondisas.blogspot.com

    ResponderExcluir
    Respostas
    1. Já postei o tutorial linda, olha lá nos goodies =)

      Excluir
  24. Adorei amiga, sou péssima em HTML, tive muito trabalho para montar meu blog, mas não possui esses detalhes que vc ensinou, talvez me arrisque... Beijokinhas
    http://carlafabieene.blogspot.com.br/

    ResponderExcluir
  25. Adorei o tuto, próximo layout vou fazer.
    Te indiquei num meme de incentivo a leitura, espero que gostem.

    guriavintagee.blogspot.com

    ResponderExcluir
  26. Estava louca por esse tuto! Eu já conhecia o tutorial, mas não estava conseguindo colocar abaixo da data da postagem que nem aqui no seu blog, vou tentar fazer, vai ajudar muito *--*

    Beijoos, Dedessa Carvalho <3
    http://lovellysummer.blogspot.com.br/

    ResponderExcluir
  27. Ai que legal (:
    Vou tentar fazer quando mudar o layout !!!

    Adorei seu cantinho (:
    Estou seguindo voce flor, se puder retribuir ficarei super feliz !!!

    Bom final de semana florzinha !

    De uma passadinha no blog, tem post novinho !

    www.lacodemetal.blogspot.com

    Com amor, thamy ;*

    ResponderExcluir
  28. Acheii muito legal!!Mais não consigo fazer :(
    Beijos!!


    Sigo seu blog segui o meu:
    http://perfectgirlever1.blogspot.com.br/

    ResponderExcluir
  29. Não consegui fazer :/ O balão de comentários não aparece (só o número de comentários). Além disso, eu queria colocar o balão abaixo da data da postagem (que nem no seu blog), mas não consegui de maneira alguma, já mexi no código e nada :( Você pode ajudar?

    Beijoos, Dedessa Carvalho <3
    http://lovellysummer.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. também não consegui
      pode me ajudar?

      simples-garotaa.blogspot.com

      Excluir
    2. Também estou tendo o mesmo problema ;//

      Excluir
  30. Olá Anny! Tudo bem? Bom eu AMEI esse tutorial quando eu li, TIPO, MESMO. Eu até coloquei no meu blog (OBS.: Eu ainda tô editando), mas eu gostaria de saber sobre outra coisa. Bom, como você colocou o título do gadget do seu blog assim? Eu queria saber como é... Ficaria muito agradecida!

    Bjos & Queijos,
    Nanda.

    ResponderExcluir
  31. Fica lindo, já está no meu próximo layout (:
    Seus tutoriais são um máximo ^^
    beijos ;*

    - Wordland

    ResponderExcluir
  32. Hey Anny! Também estava louca pelo tutorial #ConfissõesDaAnna. As datas atuais da blogosfera andam bem comuns e desde de que vi aqueles layouts mais profissa, fiquei afim de por no blog. Testei agorinha mesmo e deu certo, só não vou colocar já porque em breve vou trocar o lay e esse estilo *na minha humilde opinião* fica melhor em designs mais clean e menos enfeitadinhos demais como o atual do WC.
    P.S: Cê já começou a fazer a seleção das imagens para o 8 on 8? Pode parecer que demora mas o mês passou tão rápido que dia oito também nem deve demorar a chegar :B

    Um beijo,
    @annolivers || World Cutest

    ResponderExcluir
    Respostas
    1. Ainda não linda, mas pode deixar que eu vou separar as fotos haha Na verdade eu ainda quero tirar algumas :p
      Beijos linda!

      Excluir
  33. ameeei demais,

    viste meu blog, sou nova na area ,

    http://chuvas-de-pesamentos.blogspot.com.br/


    ResponderExcluir
  34. Amo esse tutorial, usava no velho layout do meu blog e acho que realmente dá aquela carinha de "detalhes fazem a diferença", rsrs. Amo o blog, e o conteúdo também sempre ótimo (;
    Bom, vim aqui também para falar que seu blog foi um dos escolhidos para ajudar a divulgar a "Campanha de Incentivo à Leitura", uma campanha super legal, que está mobilizando vários blogs, com o intuito de estimular os nossos leitores a ler livros, se quiser ajudar é só visitar o seguinte link lá no blog para saber mais informações de como particicar. Obrigada desde já. Segue o link abaixo:
    http://closettaberto.blogspot.com.br/2013/01/campanha-incentivo-literario.html

    Beijos, Camila.

    www.closettaberto.blogspot.com
    @blogcloseta

    ResponderExcluir
  35. Já conhecia o tutorial. Já usei também, e recomendo pra quem não usa. Fica perfeito *-*
    O blog é lindo, continue assim (:
    Seguindo ^^
    beijos ;*

    - Worldland

    ResponderExcluir
  36. Linda estou usando no meu blog
    http:blogdapaulinhacss.blospot.com

    ResponderExcluir
  37. Amei!! Mas uso um Template Free, que já vem com um balão...

    nossasfeminicesoficial.blogspot.com

    ResponderExcluir
  38. Ah Anny, obrigada pelo tutorial! Já estava procurando por ele a um bom tempo (:
    Estou fazendo o novo layout do meu blog e com toda certeza vou usá-lo nele.
    Beijos *-*
    http://cenariumfashion.blogspot.com.br/

    ResponderExcluir
  39. Este comentário foi removido pelo autor.

    ResponderExcluir
  40. olá Anny, estou apaixona pelo seu blog, ele é muito fofo *--*. estava vendo em algumas postagens aqui do seu blog, que você entende bastante quando o assunto é layouts, editar html, essas coisinhas de blog,a séculos que venho procurando algum template ou layout que se encaixe ao perfil do meu blog, daí pensei o seguinte , você poderia fazer um layout para meu blog? ele é bem simples,simples mesmo, mas ta faltando esse toque, pra ele ficar mais bonito e arrumado.por favor Anny, caso você possa fazer deixa a resposta lá no meu blog, mesmo que seja não ta ok. vou lhe agradecer muito se você puder fazer este favor pra mim. beijos *-*

    http://acerejarosa.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oi linda, atualmente só faço layouts pagos, por encomenda :)

      Excluir
  41. Muito bom o post, gostei. O seu blog é lindo ou também adorei.
    Estou seguindo aqui. Você se importa de seguir o meu também?
    Siga se gostar (nao vai gostar T.T) coloquei ja seu blog na minha barra de favoritos *--*
    Beijos
    sentierodellerose1.blogspot.com

    ResponderExcluir
  42. Otimo tutorial ! :)

    Beijos,
    http://www.paaradateen.com

    ResponderExcluir
  43. Adorei o tuto ,fácil e fica lindo de qualquer jeito... adorei as imagens foi você quem fez?? Um abração..

    caindoonareal.blogspot.com.br/

    ResponderExcluir
  44. Anny vooç poderia deixar seu seu e-mail num comentario sabe eu to terminando o meu blog (sou nova nesse ramo) e tenho muitas duvidas que queria perguntar´ para vooç*--*
    E se não quiser não tem problema :D

    ResponderExcluir
  45. Oi amor eu amo demais teu blog, estou sempre acessando, queria saber qual é o teu template? é free ou é pago? porque como eu vejo nos tutorias tu ensinando a fazer varias coisa, caixa de pesquise, cabeçalho em toda tela muitos outros mas toda vez que tento fazer eu não consigo parece q não entra mas dai em qual template tu testa essas coisa pq eu não consigo é o de viagem só queria saber o tipo daí eu mudo no meu e consigo fazer os tuos teus! Muita obrigada amor, espero que responda! Beijooos

    ResponderExcluir
    Respostas
    1. Oi amore, eu que faço meus templates, e uso o modelo travel azul (que tem bordinhas em cima), e sempre funciona aqui.

      Excluir
  46. http://karolmoraiss.blogspot.com.br/

    ResponderExcluir
  47. Se eu conseguir vou usar um dos balões ok?

    ResponderExcluir
  48. Como faz pra mudar a cor do número??

    ResponderExcluir
  49. Oi!!
    Já sigo o seu Blog, você pode seguir o meu também?

    Beijocas

    http://nomundodajujuba.blogspot.com.br/

    ResponderExcluir
  50. Lindos!

    https://www.facebook.com/MaryMundiMix

    www.marymundimix.blogspot.com

    ResponderExcluir
  51. Awn amei o tutorial...

    http://kawaii-little-things.blogspot.com.br

    ResponderExcluir
  52. Já tive um balão no meu blog, mas era diferente. Mas acabou dando um erro depois.
    Seguindo!! Passa no meu blog se quiser:

    http://hora-de-celebrar.blogspot.com.br/

    ResponderExcluir
  53. Que perfeeeeito esse blog, amei o post, saber como tornar o blog mais atrativo é sempre bom *--*
    Seguindo...

    --xoxo--
    myuniverse2012.blogspot.com

    ResponderExcluir
  54. oie !eu não sei muito bem esse negocio de medida sabe... vc pode me passar o seu ?? com as informações ja certinhas?? beijokas

    ResponderExcluir
  55. Conseguii!To usando o balãozinho de imaginação roxo!!Bjoos amo seus tutos

    ResponderExcluir
  56. Euu ainda nun consegui coloquei o Url do balão que eu queria mais não apareceu. :(
    mais vou tentando hehe.

    Meu Blog: http://soumeninatimida.blogspot.com.br/

    ResponderExcluir
  57. Se eu conseguir vou usar um dos baloes ta? beijo! amo seu blog

    ResponderExcluir
  58. Porque no meu blog o balão fica dentro da area das postagens não fora??
    é porque o meu é do modelo simples???

    ResponderExcluir
    Respostas
    1. tem que mexer no margin-left :)

      Excluir
  59. Eu ameeii,mais tentei mil vezes e não consigui!!:(

    ResponderExcluir
  60. Bê eu conseguii ficou lindo,séra que você ensina a colocar essa bola,circulo com a data dentro?
    E como nós mesmas criar nosso desenhinho desse?
    seu cabeçalho foi feito por você mesma?foi pelo Inkscape?
    Aceita afiliação?

    responde lá no blog por favor:
    simples-garotaa.blogspot.com

    ResponderExcluir
  61. Eu peguei ^^ , fazendo-discipulos.blogspot.com

    ResponderExcluir
  62. Parabéns.

    Adore o tutorial *-*
    Bem fácil de entender, tava lutando para alterar, cheguei aqui e consegui de primeira *-*

    Beijos flor.

    ResponderExcluir
  63. Oi, eu queria saber como tira depois os comentarios do rodape e deixa só os do balão?

    ResponderExcluir
  64. Anny, muito obrigada mesmo, eu peguei seus códigos , para fazer meu novo post, pode deixar que vou credita,
    Beijos

    http://gotutos.blogspot.com.br

    ResponderExcluir
  65. Não importa o quanto eu leia sobre html nos outros blogs, teu blog me encanta! Você explica de forma muito simples e aqui tem um visual limpinho *-* Só tenho que te dizer MUITO OBRIGADA por gostar de fazer isso e por fazer tão bem! Beijo

    ResponderExcluir
  66. Adorei o tutorial!
    Consegui colocar lá no blog! ^^

    BjO
    http://www.the-sook.blogspot.com.br/

    ResponderExcluir
  67. O meu balao so fica atras da area de postagem, e nao vem para frente
    Como arrumar?
    cupcakeofchocolate.blogspot.com.br

    ResponderExcluir
  68. Oiii obrigada pelo tuto, adoreiii, estou aproveitando bem os tutoriais que você colocou aqui.... parabnessss!!!! Bjsss

    www.almanaquechic.blogspot.com

    ResponderExcluir
  69. Seus tutoriais são ótimos :3
    estou te seguindo, dá uma olhadinha no meu :3

    ResponderExcluir
  70. Fica lindo. :)
    http://ancorasdayanca.blogspot.com.br/

    ResponderExcluir
  71. foi ótimo!!!!!!!
    http://agnesvata.blogspot.com.br/

    ResponderExcluir
  72. Adorei me ajudou muito Bjos...

    ResponderExcluir
  73. No meu o número fica fora da img, por que ? já alterei as margens tudo que podia e nada muda de lugar só o balão !

    ResponderExcluir
  74. me ajudou muito , estou usando
    http://cutecoreia.blogspot.jp/

    ResponderExcluir
  75. Não deu certo no meu =/

    ResponderExcluir
  76. Usei o tuto e um balão no meu novo layout. Obrigada <3

    www.amoraoprimeirorimel.com

    ResponderExcluir
  77. Ficou do lado esquerdo :( retirei...

    ResponderExcluir
  78. Adorei o tutorial! Mas o meu blog não tem esse body e tals kkkkk então não consegui :(
    Bom, mas como eu achei divo os balões eu peguei para usar em cabecalhos! É isso bjo lindo blog :3

    feminicesadolescentes.blogspot.com

    ResponderExcluir
  79. Oi,

    Amei o tutorial, irei usar !

    ResponderExcluir
  80. Faz um post de como colocar a data dentro de um balão ao lado do título do post. O seu layout é muito perfeiro, parabéns.

    ResponderExcluir
  81. Ameeeeeeeeei o seu blog! Seguindo com certezaaa! Bjãaao, sucesso pra ti!!!

    Life Style

    ResponderExcluir
  82. Alana querida, muito obrigada, usei no meu novo template, deu super certo. Deus te abençoe.

    ResponderExcluir
  83. O meu da tudo certo mais quando chega no final quando vo salva na segunda parte sempre aparece erro oque eu faço ??

    ResponderExcluir
  84. Awwnt muito obrigada flor! Consegui botar, espero que você continue com esse seu talento de ser uma blogueira! XOXO

    ResponderExcluir
  85. Não consigo,faço o passo a passo e não vai,o que acontece ?

    ResponderExcluir
  86. O meu funcionou só que ao invés de ficar no final das postagem como imaginei que ficaria,ele ficou ao lado do titulo das postagem...Isso é normal ou fiz algo errado?

    www.piimentaarosa.blogspot.com

    ResponderExcluir
    Respostas
    1. Muda o número que fica na tag: margin-left ou margin-top ;)

      Excluir
    2. colocar qual numero mais ou menos?

      Excluir
  87. Ameeei, queria colocar no meu mas o meu blog eu acho que ta com problema, não consigo ver os comentários... :( Seguindo gata amei o blog!!!

    Life Style

    ResponderExcluir
    Respostas
    1. Os meus comentarios tambem não estão aparecendo, voce ja resolveu o problema ?

      Excluir
  88. aonde fica a caixinha Expandir modelos de widget???? urgenteee

    ResponderExcluir
    Respostas
    1. Não tem, só procurar pelo código mesmo ;)

      Excluir
  89. Olá sempre uso esse seu código, mas se quiser colocar esse mesmo balão no final da postagem tem jeito° beijoo

    ResponderExcluir
  90. Olá sempre uso esse seu código, mas se quiser colocar no footer da postagem, tem como? bjo

    ResponderExcluir
  91. Oii linda, amei o tutorial. Usei um no meu blog, obrigada!! Bjss

    ResponderExcluir
  92. Não estou conseguindo, salvo e da certo mais na hora de aparecer não aparece.. Amei o seu Blog

    ResponderExcluir
  93. o balao de comentario esta no topo da postagem do lado do titulo oque eu faço ????

    ResponderExcluir
  94. No meu fica em cima o balão, como faço para deixa-lo no final do post?

    ResponderExcluir
  95. O meu balão não aparece, só aparece o numero de comentarios. O que pode ser? :(

    ResponderExcluir

- Comentários do tipo "seguindo, segue de volta" "lindo o blog, seguindo, retribui?" Serão ignorados se não tiverem uma opinião sobre o post em si.
- Não aceitamos mais selinhos e tags, sorry!
- Leia a página "FAQ" e outras páginas internas antes de perguntar qualquer coisa.
- Sua opinião é sempre bem vinda. Mas seja educado!

© Go Imagine - 2014. Todos os direitos reservados.