Contador do número de Comentários do Blogger e Facebook

Nesta postagem compartilho com vocês este tutorial bem interessante e moderno para que fique em destaque em seu blog o número de comentários do Facebook e blogger no seu template, deixando assim o design do blog mais profissional.

Na imagem ACIMA, eu destaquei o contador. Note que mostra tanto o número de comentários do blogger como também o número de comentários feito pelos comentários do facebook.

Para colocar em seu blog é muito simples...

Primeiramente vamos aplicar o estilo CSS. Para fazer isso... Entre em "Modelo" - "Editar HTML" e procure pela tag

]]></b:skin>

Tendo encontrada a tag, cole ACIMA dela o seguinte estilo css

.comments-tab-icon { height: 14px;  width: auto;  margin-right: 3px;}

Agora, procure pelo seguinte trecho

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

Observação:

Você irá encontrar três trechos iguais a esse em seu template, ou seja, este trecho se repete três vezes em seu template. Substitua o segundo trecho.

Tendo encontrado o trecho, substitua ele pelo seguinte código

<br/> 
<div style='border-top:1px solid #ddd; border-bottom:1px solid #ddd; padding:3px 0px; text-align:right;'> 
<img class='comments-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn-QeVzbhw6XmUI1HUxUirkoaoIDw-TkDlQPe_QPdLoMInmeHilp5h3VzLCbD2d7DaFwfhCgsdLtIUTV3YdCfkvlBPTZaIWY1ADYM7OViBjIuNbsjPz9VGEd-3-2X2qb8QBpRWY4D59pw/s1600/fb.png'/> 
<a class='comment-link' expr:href='data:post.addCommentUrl'><fb:comments-count expr:href='data:post.url'/> comentários</a>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</div>

Agora, basta salvar e pronto!!!

Deixe seu comentário!!!