Como adicionar um balão de comentário ao lado título do post (posição) no Blogger blogspot blog /?

4

Hoje, eu vou ensinar como adicionar um balão de comentário ao lado de cada título do post em blogs do Blogger. Normalmente em modelos padrão do Blogger ou o tema que estou usando para o meu blog, você pode ver o número de comentários abaixo o título do post é da seguinte forma: 3 comentários. Mas, para torná-la mais profissional podemos usar uma imagem de um balão de comentário onde o número comentário é mostrado dentro de uma “imagem“, como mostrado na imagem ao lado.

Antes de começar a editar o seu modelo salve um backup do seu template. Após isso, siga esses passos simples abaixo.

  • 1. Ir para Layout> Edit> Clique em HTML em “Expandir modelos de widgets”

  • 2. Procure por esse código no seu CSS. Encontra-se geralmente no final da seção CSS.

]]></b:skin>

  • 3. Substitua esse o código com o código abaixo.

/*——Commment Bubble Start——*/
.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(http://2.bp.blogspot.com/_b8IA1ajBJG8/S5tPt3thJoI/AAAAAAAAAy4/GMCCicK-kaw/comments-1.gif) no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
padding:0px 0px 0px 0px;
}
/*——Commment Bubble End ——*/

]]></b:skin>

  • 4. Agora, procure por esse código tecle F3 para localizá-lo mais rápido

<h3 class=’post-title entry-title’>

  • 5. Imediatamente a após à entry-title’> class=’post-title

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

E agora o código editado será parecido com este com este abaixo.

<b:includable id=’post’ var=’post’>

<div class=’post hentry uncustomized-post-template’>

<a expr:name=’data:post.id’/>

<b:if cond=’data:post.title’>

<h3 class=’post-title entry-title’><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>

<b:if cond=’data:post.link’>
<a expr:href=’data:post.link’><data:post.title/></a>
<b:else/>
<b:if cond=’data:post.url’>
<a expr:href=’data:post.url’><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

E está feito. Clique em salvar modelo.

Se você não gosta da bolha padrão que eu forneci, você pode usar o seu próprio. Tudo que você precisa fazer é apenas substituir a fonte de link da imagem (cor vermelha em CSS) e ajustar a largura e altura (cor azul em CSS) da bolha em conformidade. Se você não sabe fazer isso, você pode deixar um comentário abaixo deste post ou me envie um e-mail. Vou responder à sua pergunta dentro de 24 horas.

4 COMENTÁRIOS

  1. Olá meu querido, parabéns pela postagem, porém o código é usado para implementar um site com dominio blogger, eu gostaria e preciso como inserir os tais balões dos comentários de posts com o número referente aos comentários, com seria isso?

Deixe uma resposta