segunda-feira, 24 de outubro de 2011

Balões Personalizados com o número de comentários

Hooy Gente Eu ando um pouco ausente eu sei, mais como deu para perceber no post anterior estou com dificuldades na escola! Mais mais estou compensando essa ausência com um tutu super legal, que é colocar um balão personalizado com o número dos comentários. É uma forma de conseguir mais comentários no seu blog já que incentiva os leitores a comentar e é bem bonitinho também huahauahauh. Ficará mais ou menos assim:

espero que gostem! Para conferi o tutorial é só clicar em leia mais>

vá no seu HTML marque a opção expandir modelos de widgets  pressione as teclas CTRL F e pesquise por:                        <class='post-title entry-title'>  
Se não encontrar pesquise por:     <b:includable id='post' var='post'>    

 Então coloque esse código logo abaixo, do código destacado (de laranja)
<span class='post-comment-link-arriba' style='background: url(http://i.imgur.com/lfGb2.jpg) no-repeat top right; width:90px; height:80px; text-align:center; float:right;padding-top:19px'>
<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>

Ficando assim: 
           
Alguns trechos editaveis e como trocar a imagem do balãoMini gif 161                 
 Trocar a imagem do balão no trecho: (http://i.imgur.com/lfGb2.jpg) apague e coloque a URL da imagem desejada (só apague onde está grifado de azul)

Algumas imagens que eu fiz:
                

''Para pegar a URL de uma imagem é só clicar com o botão direito do mouse sobre ela e selecionar a opção COPIAR URL DA IMAGEM''

Jackie eu quero fazer o meu próprio balão pode? Claro mais não se esqueça de ajustar o código para o mesmo tamanho da sua imagem ta! por exemplo as imagens que eu fiz tem a resolução 90x80

no trecho: width:90px corresponde a largura 
no trecho: height:80px corresponde a altura
no trecho: padding-top:19px Corresponde ao numero que fica dentro do balão 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)
..::|| ◊.*.◊ [ ♡ - ( 631 ) - ♡ ] ◊.*.◊ ||::..
É isso pessoas! dúvidas comente

139 comentários :

  1. AMEI!E agora Jackie,tem tempo pra fazer o concurso?

    ResponderExcluir
  2. Adorei o tutorial, vou fazer lá no blog. Beeijos

    ResponderExcluir
  3. Ai que lindoooooo, amei o de bala! Bjo Bjo

    ResponderExcluir
  4. Amigaaa amei seus Balõezinhos personalizados =D
    Principalmente o primeiro e o ultimo rsrs
    Bjs :h:

    PS: nem preciso de dizer que AMEI seu GIF do final ! rsrs Bjs

    ResponderExcluir
  5. amei fiz isso no meu blog fico bem legal!

    ResponderExcluir
  6. FATO. Meu template não deixa eu usar esses balões personalizados t.t

    ResponderExcluir
  7. que legal já usei lá no meu blog!
    vou dar creditos na pagina de creditos ok?
    beijos
    manahatori-teengirls.blogspot.com

    ResponderExcluir
  8. *--* eu ia postar esse tutu hoje ' aksoaksp
    muuito bom ele :D

    ResponderExcluir
  9. :h: adoro tudo oq vc faz e obrigada por facilitar tanto nossas vidas hehehe bjs guriaaaa!

    ResponderExcluir
  10. oii, adorei seu blog... já estou seguindo!!
    e aproveiro a visita pra falar que está rolando o 1º sorteio do blog...
    Ficarei muito feliz com sua participação :)

    http://brechozinhoo.blogspot.com/2011/10/1-sorteio.html

    bjo bjo

    ResponderExcluir
  11. oi amei o tutorial,muito fofo!!amei as imagens tentei colocar mas ñ consegui!
    http://spaceteen-chris.blogspot.com/

    ResponderExcluir
  12. Oi Jackie *-*

    FAZ MÓ CARA QUE EU QUERO FAZER ISSO NO MEU BLOG KKKKKKKKKKKKKKKKKK Breve vou fazer e te creditar *-*

    Opa eu ahazo o Thomas Müller me diz isso todo dia brimks 182

    Bjonas (:

    Fique com Deus ♥

    ResponderExcluir
  13. Eu fiz, e ficou muito kawaii..

    Bjok´s, Guriia

    ResponderExcluir
  14. ai que lindinhos! amei o passo a passo.

    beijos linda.

    ResponderExcluir
  15. Olá Jackiee, o resultado do concurso já saiu ó:http://garota-fashiion.blogspot.com/2011/10/resultado-do-concurso.html#more tem um selinho lá pra você!
    Beijoos.. adorei o tutu!

    ResponderExcluir
  16. É muito bonitinho mesmo! :h:
    Mas nem morto eu edito meu tema deu tanto trabalho pra ficar daquele jeito...
    http://nossa-caixa.blogspot.com/

    ResponderExcluir
  17. ai amei eu tava procurando esse tuto faz um bom tempo obrigada
    beijosssssss

    http://meumundopiink.blogspot.com

    ResponderExcluir
  18. Oie :D tem um selinho pra você no meu blog ^^
    espero que goste :D

    http://conversando-com-a-lua.blogspot.com/2011/10/menos-palavras-mais-sentimentos-por.html

    ResponderExcluir
  19. Nossa que legal o tutorial :l
    Tava procurando um desses pra colocar no meu blog :d
    Amei o tutorial :h
    bj

    fiztudoporvc.blogspot.com/

    ResponderExcluir
  20. Mais nao pega no google chrome.

    ResponderExcluir
  21. :k:
    Perfeito demais, vou usar esse tutorial hoje a tarde, mas vou fazer meu próprio balão ><
    Seu blog é fofo demais! Beeijos!

    recantodalara.blogspot.com

    ResponderExcluir
  22. Oii Jackie Lembra de miim? Eu sou a dona do Blog Tweet the Girl ! Presciso muiito de um conselho seu ! O google excluiiu a minha antiga conta e o blog tbm fooi excluiido agora to em duvida sera que criio outro blog mas com o mesmo nome ou desisto de ser blogueira? Boom como não tenho mas blog vc poderia me add no meu msn para me falar sobre a resposta? é vivi-vitoria-vivi@hotmail.com mas não manda e-mail pq eu esqueci a minha senha kk sorte que tinha salvo para entrar automaticamente kk Espero o resposta e desde já agradeço !

    ResponderExcluir
  23. Realmente muito fofo esses balõezinhos de comentários! adorei dica!

    beeijos

    http://garota-absoluta.zip.net/

    ResponderExcluir
  24. Oii Jackie como vc faz akela Listinha do Menu?? Plis me ensina? :j:
    Bjus

    ResponderExcluir
  25. Oi, adorei o seu blog. Muito fofo... Dá uma passadinha: http://miss-scd.blogspot.com/ Beijos flor♥ :k:

    ResponderExcluir
  26. Eu adoro esse balaozinho, fica super fofo jackie.
    ótimo tutorial :)

    Beijos,
    http://bnascimentooo.blogspot.com

    ResponderExcluir
  27. 'Lu Ayub' é a primeira vez que alguém me diz isso hauhauahauh :f: adoreeei hahaha :h:

    ResponderExcluir
  28. ''Anônimo'' claro que pega, pois foi justo no Google C. que eu testei!
    :b:

    ResponderExcluir
    Respostas
    1. Jackie, eu fi em outros templates e ficou legal, mas no meu blog de testes, o número de comentários não fica "linkado", o que posso fazer para aparecer o link? Obrigada!

      Excluir
  29. aah claro ''Viih Bottcher'' mais que menu?
    nossa Guria que ruim hein? =/ já te add no msn viu, ai agente conversa melhor!

    Beeeeijos Flor

    ResponderExcluir
  30. Adoreei o tutu Jackie,eu queria saber como vc conseguiu personalizar a caixa de comentários vc pode me dizer?? :l:

    ResponderExcluir
  31. Ahh, eu não sabia como fazer esses balõezinhos. Ainda não tentei, mas quando quiser, já sei onde procurar :D
    Beeijo, Jackie!

    ResponderExcluir
  32. Que fofura estes balões! :) Beijinhos :*

    ResponderExcluir
  33. Acho isso suuper divo! Principalmente os q vc fez *-* mas se eu quiser deixar os comentários em janela pop up não dá :/
    Awwn obrigada! Claro que ficou lindo, a (graaaande) maioria vem de vc :3
    Beijôôncios!

    ResponderExcluir
  34. Ual, amei a post.
    O meu blog já tem esse balãozinho.
    www.gpurple.blogspot.com
    passa lá
    tem coisinhas novas : :l:

    ResponderExcluir
  35. Oooi , amo teu blog , e ele já me ajudou a decorar todo meu blog ,* kkkkk .* Bem , pode seguir meu blog amor ? world-of-girls2.blogspot.com

    ResponderExcluir
  36. Amei,adorei o do coração e das balinhas :)

    http://magicmih.blogspot.com

    ResponderExcluir
  37. Oi Jackie *-*

    Tudo bem?

    Não tenho nada pra comentar... bom dia pra você.

    Bjonas (:

    Fique com Deus ♥

    ResponderExcluir
  38. JAckie, me ajudaa! :k:
    Vai no meu blog: www.fashiondudaah.blogspot.com
    No meu bloguito não deu certooo :i:
    Só aparece o n°
    ME AJUDAAA
    Beijo
    Duda

    ResponderExcluir
  39. Muito legal adoro seu blog!Ele é muito fofo!! :h

    ResponderExcluir
  40. Nossa, eu procurava isso à anos ! Muito Obrigada, seu blog é mt fofo tbm!

    ResponderExcluir
  41. Jackie,faz mais balões?

    http://www.diariodeumameninanerd.blogspot.com/
    bjs

    ResponderExcluir
  42. Eu amei os balõezinhos, mas o meu ficou no canto das postagens e não no titulo, atrapalhou um pouco então tirei :i: mesmo assim eu amei!

    http://lollipopazul.blogspot.com/

    ResponderExcluir
  43. usei o primeiro ok?
    amo aqi amo demais
    bezosssssssssssssss

    ResponderExcluir
  44. Hoyyy Jackie! Amando cada vez mais

    ResponderExcluir
  45. Amei o blog de vcs e ja estou seguindo, eu procurei no google como se colocava o balão e apareceu o blog de vcs, eu entrei e consegui com a ajuda de vcs e do blog Teen Dream,obrigado, quando puder da uma passadinha no meu blog também e se gostar siga! Aceita parceria?? Bjs de May

    http://mayenath.blogspot.com/

    ResponderExcluir
  46. Ameei o tutorial, muito legal e util! :))

    ResponderExcluir
  47. OMG Deu certo !
    Ficou lindo ! muito obrigado Jackie !
    Amei, amei, amei o tutorial !

    ResponderExcluir
  48. Oi Jackie to triste pq vc não fes com fundo transparente ai ficou meio feinho :i:

    ResponderExcluir
  49. Fiz como você explicou mais não aparece o balão,o que eu faço?

    ResponderExcluir
  50. @Stefanny Tente outros códigos linda, que estão disponíveis em outros blogs ;D

    ResponderExcluir
  51. oi adorei seu blog entra no meu, eu sou yasmin jah tenho um blog faz tempo se chama garota fashion star e agora cliei um c/ minha amiga sabrina entra nos dois?

    Amei seu blog bjokas!!!!!

    Só meu:

    http://garotafashionstar.blogspot.com/

    Meu e dah minha amiga:

    http://sweetfordolls.blogspot.com/

    ResponderExcluir
  52. CONSEGUI :K: ATÉ QUE ENFIM ACHEI UM TUTO QUE ENSINOU DIREITO AMEII AQUI :C:
    TUDO MUITO LINDOOOO :C:
    BJS
    http://priscilarocha31.blogspot.com/

    ResponderExcluir
  53. Não estou consseguindo pegar o códico da imagem...
    Pode ir no meu blog e colocar o códico da 1ª imagem 2ª e última??
    MUIIIITO obrigda viu??
    www.befys.blogspot.com
    Linda-Já estou seguindo!!

    ResponderExcluir
  54. ótima dica :)
    tecnicotubar.blogspot.com.br

    ResponderExcluir
  55. :d: eu usei fiz la no meu blog, mas personalizei o meu balaozinho.
    suas dicas sao bem legais.

    ResponderExcluir
  56. Jackie!!!!Que Lindooooos!!!!!!!Amei,segue lá o novo blog?
    http://fashiongirloficial01.blogspot.com.br/
    :h:
    Please
    Bye:l:

    ResponderExcluir
  57. Maravilhoso e muito fofo essa tutorial fica lindo no blog. http//roupinhadeblog.blogspot.com.br

    ResponderExcluir
  58. Peguei um, o de coração, ja tem os créditos, na página ''Créditos''. Obrigada, era exatamente disso que precisava, parabéns flor, seu blog me ajuda muito, assim como ajuda também, outros blogueiros! Beijos linda, pode seguir meu blog? Criei a pouco tempo, e estou precisando muito de sua ajuda!

    sonhos-de-um-adolescente.blogspot.com

    ResponderExcluir
  59. Nossa, em um piscar de olhos eu conseguir fazer fácil fácil ^^' mais uma perguntinha Jackie como eu posso mudar a cor do numero? porque eu escolhi o de coraçãozinho mais ai o coração e rosa e a letra e um clarinho nem da para ver direito :S' e possivel :g: ?

    ResponderExcluir
  60. jackie gostaria de fazer o meu mais percisa ter photo shop?

    ResponderExcluir
  61. Amei a dica e o tutorial

    Segue? Eu sigo de volta! Meta 20 seguidores premio= 50 background+Primeiro Tutorial

    Vuuuup>>>http://portal-girls-oficial.blogspot.com.br

    ResponderExcluir
  62. Não deu certo!!!!!!! Não aparece nenhum dos códigos! Inheeeee! Me pode ajudar??

    www.sweetdreams-carol.blogspot.pt

    ResponderExcluir
  63. Já deu... Brigada na mesma pelo tutu, seu blog é maravilhoso! Beijos

    ResponderExcluir
  64. Nossa!! Muito bom ! Eu fiz no meu blog! ^^ Ficou ótimo ..
    http://missglamur.blogspot.com.br

    ResponderExcluir
  65. Consegui!ótimo tutorial! :h: eusimplesmenteloucaoficial.blogspot.com

    ResponderExcluir
  66. Valeu!! Em breve meu blog vai abrir as portas pra vcs! ^^

    ResponderExcluir
  67. Err nenum dos dois codigos vai no meu blog

    ResponderExcluir
  68. TE AMOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO MAIOR FÃ !
    http://vaidoosas.blogspot.com.br/#

    ResponderExcluir
  69. :h: Obg,consegui colocar.

    Beijos.

    "Olha Só Amiga"

    ResponderExcluir
  70. Jackie, queria colocar no meu, mas nao encontrei nenhuma das duas opções no meu html, voce poderia me ajudar?

    lasmasbellaspatynat.blogspot.com.br

    natacharlvechia@gmail.com

    ResponderExcluir
  71. @Natacha Vechia Nenhuma das opções? O.o
    bom nesse caso vc terá que tentar outros tutoriais com efeito semelhante :(

    ResponderExcluir
  72. Obrigada mesmo:) Estou usando o do coração, que é muito fofo! Os créditos estão em uma das páginas do menu.
    beijos:* malú

    ResponderExcluir
  73. valeu, deu certinho e eu usei uma imagem sua, pode ver como ficou www.cositasfemininas.blogspot.com.br adorei o blog, estava procurando por este tuto e cai aqui...bjs

    ResponderExcluir
  74. Bah Jackie, tô cheia de dúvidas hoje KK. Não consigo acertar nas medidas ._. Help!?
    Ranwr -> dreams-in-vain.blogspot.com

    ResponderExcluir
  75. :h: NÃO CONSEGUI ENCONTRAR A HTML CORRESPONDENDENTE

    ResponderExcluir
  76. Que legal, pus o balãozinho no meu blog, ficou lindo, obrigada por ensinar, beijos ...


    http://www.aprendizdecabeleireira.com/

    ResponderExcluir
  77. pooo valew ajudoou muitoo deu certinho brigadão

    ResponderExcluir
  78. :h Ameei os desenhinhos só que não deu :i

    dozeemeio.blogspot.com.br Djackie da uma passadinha no Meu blog para você vê os Créditos Que te dei na coluna acima depois do meu Layout está Escrito Créditos são todos os créditos que dou a todos os Blogs que pego as coisas e os únicos créditos que tem lá por enqunato é só para você! entra lá e vê se gostar do meu lindo Bloguinho Continua e ver algumas coisinhas e comenta ta eu ainda sou iniciante um Bjiinho

    ResponderExcluir
  79. Eu usei um dos seus baloes okk??Se tiver qualquer problema eu tiro é só avisar!
    luizajusto@gmail.com

    ResponderExcluir
  80. @Luizatd bem linda! euu fiz pra vcs usarem mesmo (:

    ResponderExcluir
  81. Nossa obrigada mesmo! Me ajudou muito!

    Se não se importar estou usando um balão seu ok?>.<

    Brigada mesmo! Adoro seu Blog!

    Bjs,

    http://sweet-dreams3.blogspot.com.br/

    ResponderExcluir
  82. Amei o tuto, à tempos eu o procurava, já vou por no meu novo layout.Como sempre brigada Jackie ^3^
    #May-Sun

    layrakauana.blogspot.com

    ResponderExcluir
  83. Jackie, como eu mudo o tamanho do número que fica dentro do balãozinho ?
    (me responde por aqui mesmo, pois estou sempre visitando seu cantinho)
    Beijos ;*

    ResponderExcluir
    Respostas
    1. Nesse código não tem opção para aumentar o número :(
      Tente incluir isso no código

      font-size: 26px;

      ''TALVEZ'' de certo (:

      beijus mh linda!

      Excluir
  84. Fiiicouu muuito fofoh <3

    (Joventeens.com)

    ResponderExcluir
  85. Muito lindo, e muito útil,usei e amei,beijão!
    http://shblahblahblah.blogspot.com.br/
    http://modamassan.blogspot.com.br/

    ResponderExcluir
  86. Jackie, eu adorei o tutorial, mas quando você não quer colocar comentários em uma página do blog, o balãozinho aparece, e não fica bom. :/ você sabe como resolver?

    ResponderExcluir
    Respostas
    1. talvez esse tutorial te ajude>>http://www.mundoblogger.com.br/2009/11/ocultar-elementos-em-pagina-especifica.html

      beijus *--*

      Excluir
  87. Te amooo Jackie vc é demais da conta obrigada por ajudar meu BLOG a ficar cada dia melhor valeu mesmo!!!!

    ResponderExcluir
  88. oie eu amei o tutorial, mais estou com duvidas, como eu ponho o coração, no lugar da bala?

    ResponderExcluir
  89. Jackie você sabe algum site que tenha outros tipos de balões?

    ResponderExcluir
  90. Muito obrigada consegui colocar ;D

    lindamenteloirah.blogspot.com.br

    ResponderExcluir
  91. adoreiiiiiiiiiii ! tanto que coloquei lá no meu blog ficou super fofinho *-* da uma passadinha lá e ver como ficou ! http://sabedorianaoseiescrever.blogspot.com.br/aproveita e segui ainda preciso de muita ajuda por lá rsrsrs bjinhos

    ResponderExcluir
  92. esse balao n tem link? tem algum qvc ensina a ter link? o blogger mudou os codigos e agora ele n permite mais certos codigos....

    ResponderExcluir
  93. No meu nao apareceu nenhum dos dois ><
    Beeijos,
    Gabi

    http://girlswithstyles.blogspot.com.br/

    ResponderExcluir
  94. ameiii Jackie , ficou muito foofo no meu blog !
    bjss

    http://lovedreamsonhodeamor.blogspot.com.br/

    ResponderExcluir
  95. Amei , quando eu chegar em casa vou tentar fazer beijos .
    Quando puder dá uma passada lá no meu blog .
    pequenagiih@blogspot.com

    ResponderExcluir
  96. Oi Jackie! Amei o tuto. Muito obrigada! Procurava há séculos!
    Mas tem algo dando errado no meu HTML, pois sempre que coloco esse código, aparece dando erro e a seguinte mensagem:

    "O widget com id "blog1" não pode conter elementos: "span". Um widget pode conter apenas elementos b: includable."

    Vou tentar de novo!
    Beijos!

    www.blog-dreamsofagirl.blogspot.com

    ResponderExcluir
  97. Poxa no meu ñ ta dando certo já tentei vários codigos e neum dar certo...me ajuda por favor...
    http://malukinhasfashion.blogspot.com.br/

    ResponderExcluir
  98. Ameii e já fiz no meu ! ? Ficou muito fofo !!
    Visita ? http://cat-girl-love.blogspot.com.br/

    ResponderExcluir
  99. Fiz um meu próprio e ficou muito legal!
    Confere lá?
    http://mundofashionvih.blogspot.com.br/

    ResponderExcluir
  100. fás séculos que estou procurando por isso,mais não está dando certo,pode me ajudar??(responda lá no meu blog,por favor)
    http://animedoqem.blogspot.com.br/

    ResponderExcluir
  101. Jackie, como o blogger atualizou, não consegui fazer! Me ajuda por favor

    ResponderExcluir
    Respostas
    1. Quando clico ctrl f e pesquiso o código, ele não é encontrado :/

      Excluir
    2. Tenta esse aqui Gabi > http://www.elainegaspareto.com/2013/07/comentarios-dentro-de-um-balao.html

      Excluir
  102. é lindo! tem alguma maneira de fazer com que só apareça nos posts.. e não nas páginas estáticas?

    ResponderExcluir
  103. Oi Jackie, adorei o tuto, mas no meu só consta com 0 comentários, ele não está mostrando o número certo, o que eu faço? :(

    ResponderExcluir
  104. Sempre salvando a minha vida hahahaha
    Obrigadaaa!
    http://natalibispo.blogspot.com.br/#

    ResponderExcluir
  105. ensina a fazer um cabeçalho" igual" o seu? digo como colocar varias imagens assim em volta.

    convido vocês a dar uma passadinha no meu blog é novo mais ja tem post la http://crysmaier.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Não tem segredo Crys.
      Faço no photoscape (nao manjo no photoshop), os pngs pego na internet (:

      Excluir
  106. Finalmente um post que ensina certinho! Obrigada!

    ResponderExcluir
  107. NO meu fica aparecendo lá em cima, antes do título da postagem.
    Fiquei frustada. tentei de tudo mas não deu e para piorar no meu layout a imagem de número de comentários só aparece um pedaço.

    ResponderExcluir

.