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: , , , ,