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

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6xaGpiyyV7QSK_P36Ohyfnph4fCOGe5YTzYge9OwEzBl-xR6XuR_QmLyDV5a20T1xjw5I3lz8wGIfTP25Edm0GJCl-34kCrordNb3_cPHK0wC_pTGd8578FHrwGh4HMjl5itW98Fp5wA6/) 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.