domingo, 3 de julho de 2011

Colocando Balão de número de comentários no título do post




Deixe o número de comentários da sua postagem em forma de balão com apenas um pequeno código. 
Para colocar esse código em seu blog entre na página "Editar HTML", marque a opção expandir modelos de widgets e procure por : <b:includable id='post' var='post'>                                      (CTRL+F)


Em seguida, escolha um dos balões abaixo. Tem vários balões diferentes com seus respectivos códigos. Você apenas vai copiar o código e colar depois da linha pesquisada anteriormente.


Balão 1

<span class='post-comment-link-arriba' style='background: url(http://codigosblogger.webs.com/Gadgets/baloes%20nos%20comentarios/balaoamarelo.png) no-repeat top right; width:50px; height:50px; float:right;padding-top:6px; text-align:center; font-family:calibri; color:white;'><b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style="text-decoration:none; font-family:calibri; color:white;"><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/></b:if></a></b:if></span>

Balão 2

<span class='post-comment-link-arriba' style='background: url(http://codigosblogger.webs.com/Gadgets/baloes%20nos%20comentarios/balaoazul.png) no-repeat top right; width:50px; height:50px; float:right;padding-top:10px; text-align:center; font-family:calibri; color:white;'><b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style="text-decoration:none; font-family:calibri; color:white;"><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/></b:if></a></b:if></span>



Balão 3
<span class='post-comment-link-arriba' style='background: url(http://codigosblogger.webs.com/Gadgets/baloes%20nos%20comentarios/balaopapel.png) no-repeat top right; width:50px; height:50px; float:right;padding-top:10px; text-align:center; font-family:calibri; color:white;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style="text-decoration:none; font-family:calibri; color:white;"><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/></b:if></a></b:if></span>

Balão 4
<span class='post-comment-link-arriba' style='background: url(http://codigosblogger.webs.com/Gadgets/baloes%20nos%20comentarios/balaolaranja.png) no-repeat top right; width:50px; height:50px; float:right;padding-top:10px; text-align:center; font-family:calibri; color:white;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style="text-decoration:none; font-family:calibri; color:white;"><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/></b:if></a></b:if></span>

Balão 5
<span class='post-comment-link-arriba' style='background: url(http://codigosblogger.webs.com/Gadgets/baloes%20nos%20comentarios/balaopreto.png) no-repeat top right; width:50px; height:50px; float:right;padding-top:10px; text-align:center; font-family:calibri; color:white;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style="text-decoration:none; font-family:calibri; color:white;"><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/></b:if></a></b:if></span>


Balão 6
<span class='post-comment-link-arriba' style='background: url(http://codigosblogger.webs.com/Gadgets/baloes%20nos%20comentarios/balaorosa.png) no-repeat; width:50px; height:50px; float:right; padding-top:10px; text-align:center; font-family:calibri; color:white;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style="text-decoration:none; font-family:calibri; color:white;"><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/></b:if></a></b:if></span>


Balão 7
<span class='post-comment-link-arriba' style='background: url(http://codigosblogger.webs.com/Gadgets/baloes%20nos%20comentarios/balaovermelho.png) no-repeat; width:50px; height:50px; float:right; padding-top:10px; text-align:center; font-family:calibri; color:white;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style="text-decoration:none; font-family:calibri; color:white;"><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/></b:if></a></b:if></span>

Lembrando que esses são os personalizados por nós.
Se você quiser personalizar seu próprio balão veja abaixo.

Você apenas vai trocar a URL destacada no código pela URL da sua nova imagem.


Depois de ter colado o código, apenas salve.

Marcadores: , , , ,

18 Comentários:

Às 5 de julho de 2011 20:38 , Blogger Jhonatan Santos disse...

esqueceram de avisar que naum funciona!

 
Às 6 de julho de 2011 00:11 , Blogger Ebrahim disse...

Jhonatan
Está funcionando normalmente, refaça de novo!

 
Às 11 de julho de 2011 16:35 , Blogger Carol disse...

Não tem link no balão

 
Às 11 de julho de 2011 17:03 , Blogger Códigos Blogger disse...

@Carol Pode ser mais específica?

 
Às 11 de julho de 2011 19:46 , Blogger Luiz Guilherme disse...

cara eu uso o " dicus 'no meus comentários do blog tem algu para lá
nerdiado.blogspot.com

 
Às 6 de agosto de 2011 11:21 , Blogger Fernando Hal disse...

Faltou o link no numero de comentarios da imagen.
Nao está igual o do seu blog(linkado).

 
Às 6 de agosto de 2011 11:22 , Blogger Fernando Hal disse...

Será que da para linkar o numero?

 
Às 10 de agosto de 2011 14:52 , Blogger Códigos Blogger disse...

@Fernando Hal O balão ja é linkado diretamente para o comentário.

 
Às 10 de setembro de 2011 22:32 , Blogger Códigos Blogger disse...

Como fazer pro balão ter o link dos comentarios?

 
Às 10 de setembro de 2011 23:50 , Blogger Códigos Blogger disse...

Para linkar o balão, acrescente...



antes de...

e acrescente...



No final do código.

 
Às 11 de setembro de 2011 00:26 , Blogger Códigos Blogger disse...

Fiz e ainda não resolve, segui direitinho.... 

 
Às 26 de outubro de 2011 16:43 , Blogger Nema Charmosa disse...

Obrigada Deu certinho.
Deus te abençoe.
Parabéns pelo blog

 
Às 27 de outubro de 2011 15:23 , Blogger Rayanne Ellen disse...

NOSSA VC ESTÁ ESTRAGANDO SEU SITE COM ESSES MILHÕES DE LINKS , MEU DEUS É MUITO INCÔMODO TODA HORA APARECER UMA PLAQUINHA DE OUTRO ASSUNTO QUE NÃO TEM NADA A VER , E EU FICAR PROCURANDO O MINÚSCULO XISZINHO PRA FECHAR O LINK !!! É UMA PENA O SITE É TÃO BOM NÃO PRECISAVA FAZER ESSAS COISAS .

 
Às 27 de outubro de 2011 22:36 , Blogger Códigos Blogger disse...

Não sei do que você está falando =/
Envie um print desta tal plaquinha para o email codigosblogger@hotmail.com

 
Às 23 de novembro de 2011 11:15 , Blogger Amiltis disse...

Funcionou direitinho.Obrigado pela dica

 
Às 28 de dezembro de 2011 12:59 , Blogger Irismar Oliveira disse...

Valeu amigo deu hiper certo, amei os modelos!!

Boa tarde

 
Às 12 de janeiro de 2012 19:43 , Blogger Inês Rochinha disse...

Ajudou imenso! Obrigada :D

 
Às 13 de janeiro de 2012 02:30 , Blogger Teste disse...

Porra Velho...Valeu mesmo.!
desculpe ai pelo "porra"
mas Faz tempo que procuro por isso!
Valeu mesmo!

 

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial