Balão Número de Comentários no Blogger

Colocar um balão com o número de comentários ao lado do título.


Isto serve para que os teu visitantes saibam quantas pessoas já comentaram as tuas mensagens, pode levar os visitantes a ver as mensagens com mais comentários ou mesmo levar os visitantes a lerem esses comentário.

Além disso se os teu visitantes clicarem em cima do balão serão enviados directamente para os comentários da respectiva mensagem.

Tipo: Tutorial

Plataforma: Blogger

Ferramentas: Comentários

Grau de Dificuldade: Fácil

Implementação:

1º . Editar Html do teu blogue

2º - Procura por: <class='post-title entry-title'> ou <b:includable id='post' var='post'>.

Nota: Pode ser uma ou a outra, depende do modelo do teu template, geralmente os templates novos usam a primeira opção.

Logo depois cola o seguinte código:

<span class='post-comment-link'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>1 <b:else/> <data:post.numComments/></b:if></a>
</b:if>
</span>

3º - Após este passo vamos colocar o CSS, para isso procurar por:  ]]></b:skin>  e cola antes desta o seguinte código:

.post-comment-link{
background-image: url(
https://dl.dropbox.com/u/3883727/CarlinhosExplica/FuncionalidadesPosts/images/bubble.png) 
background-repeat: no-repeat;
width:48px;
height:48px;
top: 0px;
right: 0px;
text-align:center;
float: right;
padding-top: 8px;
}
.post-comment-link a{
color:#fff;
font-size: 18pt;
}
.post-comment-link a:hover{
color:#fff000;
text-decoration: none;
}

4º - Gravar e ver se está bem, se não gostar pode alterar o CSS a seu gosto.

Ajustes que se pode fazer no código;
Trocar a imagem do balão:
Troca a url da imagem (background-image) pela a nova da tua imagem e as medidas do novo balão.

Posicionar correctamente o número de comentários dentro do balão:

padding-top:8px este é o espaço acima do número, portanto altera esse valor até o número de comentários ficarem na posição correcta, este código muda a posição no sentido vertical (para cima e para baixo), na direcção horizontal está centralizado automaticamente.

Formatação do número de comentários (texto):

Pode-se alterar o formato do texto, ou seja, o número que aparece dentro do balão, para isso alterar o estilo CSS com o nome (.post-comment-link a).

Para alterar o estilo quando se passa o rato por cima do numero,  alterar o CSS com o nome (.post-comment-link a:hover).

Também se podes alterar a cor (color) e o tamanho da fonte (font-size), etc.