30 de maio de 2016

12 Balões de comentários para colocar ao lado do título das postagens no Blogger

Comentários em forma de balão ao lado do título da postagens é uma boa alternativa para você personalizar o seu blog. O balão é exatamente o da imagem acima, porém vamos deixar outros mais personalizados também.

Aplicando no blog

  1. Faça o login no Painel do Blogger.
  2. Vá até Modelo de seu blog desejado e clique em Editar HTML.
  3. Clique sobre o editor do blogger e tecle CTRL+F e procure por <b:includable id='post' var='post'> e exatamente abaixo dele, cole o código do balão que escolher abaixo.
Vamos aos balões, escolha um e cole abaixo do trecho encontrado acima.
<span class="post-comment-link-arriba" style='background: url(https://3.bp.blogspot.com/-cuHg1PKGS9k/V0xShkbQ8NI/AAAAAAAAFVg/fBiLm-mbMcI3l5dSaHJ1t6uTK1_u02lqwCKgB/s1600/balao-cinza-codigosblogger.png) no-repeat top right; width:50px; height:50px;padding-top:10px;float:right; text-align:center;'><b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='text-decoration:none;color:#fff;'><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/></b:if></a></b:if></span>
A parte destacada no código é a URL da imagem do balão. Abaixo segue mais opções de balões, copie a URL do balão desejado e troque pelo trecho destacado no código.

 https://2.bp.blogspot.com/-10fn_JCyoXY/V0xZw4U6EAI/AAAAAAAAFWA/B17EMUG7SdY7839QeQYb8ErCNsfXXGi_ACLcB/s1600/balao-vermelho-codigosblogger.png

https://1.bp.blogspot.com/-hRABg_Ekft4/V0xZw8akhbI/AAAAAAAAFWE/FRLBJTiN5N8KjHqAxmB6Ooeqb7zxk-ekwCLcB/s1600/botao-preto-codigosblogger.png 

https://3.bp.blogspot.com/-yLbi_Yd48sk/V0xaTaLQHqI/AAAAAAAAFWI/GUlPcGX6NlE7rWnVvayaaE9SRcydgUFTACLcB/s1600/balao-laranja-codigosblogger.png

https://4.bp.blogspot.com/-EBN2QOO2kDA/V0xa2dJbYOI/AAAAAAAAFWQ/lGaftPUCVfclrIYmw3VxLMilBD-BOUSVgCLcB/s1600/balao-rosa-codigosblogger.png

Balões personalizados

 

https://4.bp.blogspot.com/-TR6FXLIu9n4/V0xbUznQsUI/AAAAAAAAFWY/D9zF7VF2ZpozE5LCMiMj-xTZh2g5i4dFQCLcB/s1600/balao-personalizado-azul-codigosblogger.png

https://4.bp.blogspot.com/-AEyP2rjxIus/V0xbvuSF4eI/AAAAAAAAFWg/UboRW7Gv7CoMt7yS3XSU2DsoEY0Pq15GgCLcB/s1600/balao-personalizado-vermelhado-com-listras-codigosblogger.png

https://2.bp.blogspot.com/-pl0m6OC51Gk/V0xcDv51MPI/AAAAAAAAFWo/fW7ZWoSAftQKcMPB9BeY3QcttSyOpIY0wCLcB/s1600/balao-personalizado-azul-com-bolhas-codigosblogger.png

https://2.bp.blogspot.com/-tGRaCwsCfwE/V0xcfaZb4FI/AAAAAAAAFW0/1TjLrwp4gycHQaniHt6xH8MEqRNWAN0ewCLcB/s1600/balao-personalizado-nuvem-rosa-codigosblogger.png

https://3.bp.blogspot.com/-OF5iej4Qu0w/V0xcswrzY4I/AAAAAAAAFW4/ZmXd3iwenA0EVS8CmmIlhMhZTZTZu7lDgCLcB/s1600/balao-personalizado-amarelo-listrado-codigosblogger.png

https://2.bp.blogspot.com/-U-6w7uTcWYg/V0xc_m-EArI/AAAAAAAAFXA/p5c140HJaB8hdRb79qiBhJh_9g7nHUnGwCLcB/s1600/balao-personalizado-vinho-codigosblogger.png

https://2.bp.blogspot.com/-J_UoxIzloF8/V0xdRYNizEI/AAAAAAAAFXI/m8R6D97lq3ICv0N44tDoceHU_AY5ks9HwCLcB/s1600/balao-personalizado-rosa-codigosblogger.png

Para os balões personalizados, pode ser que você precise configurar melhor a posição do número de comentários, cor etc.

Para fazer essas personalizações no código, observe o trecho  <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='text-decoration:none;color:#fff;'> onde color é referente a cor do número que será exibido no balão.

Se o numero não ficar no meio do balão, você pode personalizar a posição dele no seguinte trecho <span class="post-comment-link-arriba" style='background: url(link-do-balao-escolhido) no-repeat top right; width:50px; height:50px;padding-top:10px;float:right; text-align:center;'> onde padding-top você controla a posição vertical, se quiser controlar a posição horizontal, adicione um padding-left ou padding-right e informe os pixel que fique alinhado com o botão.

Faça vários testes até ficar tudo certinho.

Dúvidas? deixe um comentário.

Classificação: 5 12 Balões de comentários para colocar ao lado do título das postagens no Blogger por em . Aprenda a colocar um balão de comentários ao lado do título das postagens no Blogger.

Trabalho com desenvolvimento web profissionalmente desde 2014, fundei a Web Creative em 2015, uma agência focada em criação de sites e resultados digitais. Através desse blog passo um pouco da minha experiência de 6 anos com o Blogger.

Recomendamos também

0 comentários: