![[ Ferramentas Blog ]](/wordpress/wp-content/themes/fb5/images/logo.png){kind=logo}
Contador de Comentários dos artigos no Blogger.
Para quem usa o Blogger vou mostrar como destacar a quantidade de comentários que seus artigos recebem individualmente colocando o número num balão ao lado do título. Essa é uma boa forma de incentivar as pessoas a comentarem em seu blog e destacar os artigos com maior participação de seus visitantes. Toda forma de interação em seu blog tem que receber especial tratamento para que seu blog mostre-se relevante e útil para seu público alvo. É como um contador de comentários de seus artigos e bem fácil de aplicar.
O Formulário de comentários em cada artigo de seu blog é o principal canal de comunicação entre você e seus leitores e todo destaque que você puder dar a isso é fundamental para as suas relações com o seu público. Recomendo que mantenha este serviço sempre disponível e temos esses artigos que podem te ajudar a fazer bom uso dessa ferramenta em seu blog:
- Configurando o Formulário de Comentários do seu blog
- 7 Passos para Construir uma relação com seus Leitores
Agora vejamos como colocar o número de comentários que cada artigo recebeu bem ao lado do título deles. Será dentro desse “balão” como da figura do início do artigo onde o número aparecerá, no caso é uma imagem padrão, mas depois você pode mudar por qualquer outro fundo que desejar ou criar para seu blog. Mas essa imagem tem transparência e acredito que se adapte a qualquer tipo de layout e cores de blogs.
Como vamos mexer no código-fonte do seu blog é bom lembrar de fazer um backup de segurança para evitar erros e faça tudo antes em um blog para testes e verificar os resultados antes de aplicar em seu blog principal.
Adicionando o Contador de Comentários.
Vá ao menu do Painel do Blogger e clique em “Layout” ~> “Editar HTML” e marque a opção de “Expandir modelos de widgets” para poder visualizar o código-fonte de seu blog por inteiro. Agora procure pela linha:
]]></b:skin>
E imediatamente ACIMA dela cole o trecho de CSS:
.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(http://imagesharing.com/storage/090831123909987.jpg) no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 15px;
text-align : center;
position:rigth;
}
Em destaque de vermelho está a URL da imagem, mas você pode colocar outra salvando a imagem do balão em seu host de imagens preferido. Até ensinamos aqui sobre onde armazenar imagens na internet, veja esses artigos nos links relacionados no final do artigo.
Em verde são as medidas da imagem. O que destacamos de rosa são, respectivamente para cada linha: tamanho da fonte do texto; margem superior; margem da direita; alinhamento do texto; e a posição em relação à página. Você pode testar e modificar isso para ver como fica melhor em seu blog.
Falta agora adicionar o código HTML que faz isso funcionar. Então volte ao código-fonte e procure por:
<h3 class=’post-title entry-title’>
E imediatamente ABAIXO cole o trecho sem modificar nada:
<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>
Salve o modelo e veja o resultado em sua página. Se o artigo não tem nenhum comentário aparecerá “0” (zero) e só terá números se tiver algum comentário e esse código conta os comentários totais, incluindo os do autor do blog naquele artigo.
Você também pode testar adicionar esse segundo trecho de código em outras partes para ver o resultado e descobrir novas funções e destaques para ele.
Artigos complementares e importantes:
- Usando Imagens no Blog Blogger
- ImageSharing – URL de imagens Automaticamente
- Otimização de Imagens – SEO de Imagem
- Contador de Seguidores do Twitter no Blog
- Analisando seu Blog para gerar mais visitas
Amigo muito obrigado por compartilhar esse tipo de informação conosco, fui obrigado até a favoritar sua página aqui no meu navegador.
valeu por mais essa dica…deu um pouco de trabalho quando fiz as pequenas mudanças.
Mas é pq ainda estou aprendendo a estrutura do blog…xml. css….
to pesquisando bastante e seu blog é uma verdadeira biblioteca de dicas e tutoriais…
Olá.
No meu não funcionou.
A imagem não aparece.
O que fazer?
@Priscilla,
Verifique se não apagou alguma coisa e se o link da imagem está funcionando.
Certefique-se de que colocou o código CSS onde indicado.
Gostei muito do conteúdo de seu blog, parabéns.
"Uma vela nada perde quando, com sua chama,
acende uma outra que está apagada. "
Abraços forte
Marcos, eu uso o Disqus. Será que esse balão vai funcionar por lá?
@Hamilton,
Só funciona com o comentário nativo do Blogger.
Oi
Não localizei a linha abaixo:
(h3 class='post-title entry-title')
Onde devo incluir o código para o funcionamento correto da ferramente?
obrigada!
ps: Adorooo o blog de vc's
@Viviane,
Todo template do Blogger tem essa linha, senão seus artigos não têm títulos.
Faça duas coisas:
1. Vc deve ter esquecido de clicar em "Expandir modelos de Widgets". Sem isso não dá ver certas linhas do código-fonte.
2. Depois procure apenas por "post-title entry-title" que vc vai ecnontrar. Pode ser que o "h3" em seu blog tenha sido trocado por outra coisa.
Espero que resolva.
?Marcos saiu tudo perfeito, agradeço por mais essa dica.
Marcos, encontrei a dica do que eu predentia fazer em outro lugar … Seu site é simplemente demais. Desejo muito sucesso cara! de coração.
@Viviane,
@Marcos,
Assim, sobre esse problema ai eu sei o que é.
Caso nao ache esses tipos de linhas, na busca pelo texto vá apagando as letras ate achar algo, e analise se pode ser isso:
No meu caso a linha que correspondia a essa que o Marcos falou era [h3 class='post-title'] (sem o 'entr-title') se nao fosse essa a minha nao teria essa linha tambem, entao eu apliquei nessa, so que houve algum conflito com a imagem, ela nao apareceu, e o que apareceu foi a imagem de fundo do texto do post, se puder me ajudar Marcos, eu agradeceria muito
Obrigado
ai cara gosto muito do seu blogger sempre quando procuro um tutorial pro meu blog o seu ta la@_@ e é sempre nele que eu entro porque tudo ki eu procuro aki eu acho vlw mesmo ki seu blog fik melhor ainda!!
Gosteu e já estou usando, so fiz uma alteração que é limita-lo para aparecer em somente páginas de postagem.
Achei o que eu queria, goste e funcionou, mais só para os comentários que ainda estavam no padrão do blogger. Como estou usando o Intense Debate aparece a imagem mais não o numero de comentários. Outra coisa como eu tiro o escrito Comments e Comentário do blogger? Creio que seja no post-footer mais o que?
Enkel, vc conseguiu resolver o problema da contagem do intense debate?
Você poderia repostar a imagem Marcos?
Olá Marcos!
Em primeiro lugar, parabéns pelo blog, como já lhe disse o considero o melhor do setor.
Não consegui fazer a alteração, aparece sempre este erro: “Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: Open quote is expected for attribute “{1}” associated with an element type “cond”.”
Pode me ajudar?
Um abraço!
Bom, no meu salvou sem erro, porém a imagem não aparece!
Possivelmente, por causa do IntenseDebate. Uma pena…
Parabéns pelo blog, mais uma vez!
Ei Marcos, como faz para colocar o contador de comentários usando o DISQUS
Fabrício,
O Disqus tem na ajuda deles os códigos que devem ser usados para contar comentários. Procure por lá. Infelizmente não temos como ajudar nesse modelo aqui, já que o código é para quem usa o sistema do Blogger.
Marcos, a imagem foi deletada!