Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1513083632
Vida do cache: 1513126832
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Postagens

Contador de Comentários no Titulo dos Posts

Dando segmento a personalização dos comentários no blog, hoje vou mostrar como destacar no titulo do post a quantidade de comentários que cada postagem recebeu, incluindo um contador de comentários em forma de balão no título dos posts.
É uma boa opção de mostrar a seus leitores quais os artigos publicados tiveram mais participação dos usuários.

Demo

Neste tutorial você vai aprender a incluir um contador de comentários onde a quantidade de comentários recebidos em cada postagem aparece ao lado do título de cada post, dentro de uma imagem, em forma de um balão.

No painel do Blogger, acesse o menu “modelo” e entre na edição HTML do seu template, clique em “Expandir modelos de widgets” e procure pela tag ]]></b:skin>
e cole ANTES dela o código a seguir:


.numComments {
background: url(ENDEREÇO-DA-SUA-IMAGEM) no-repeat top right;
float:right;
text-align: center;
padding: 10px 0 0 0;
margin-top : -15px;
font-size: 150%;
width: 50px;
height:50px;
color: #fff;
}
.numComments a:link{
color: #fff;
}
.numComments a:visited{
color: #fff;
}

 

Agora procure por:


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

 

Cole o código a seguir logo ABAIXO:


<span class='numComments'>
<a expr:href='data:post.url'>
<data:post.numComments/></a></span>

 

Agora é salvar as alterações!

No Código CSS você pode editar alguns elementos de acordo com seu gosto.
Vamos identificar cada elemento, para facilitar possiveis alterações, caso queira fazer:

float:right; ? Posição do elemento á direita
padding: 10px 0 0 0; ? Posicionamento da numeração dentro da imagem
margin-top : -15px; ? Posicionamento da imagem ao topo
font-size: 150%; ? tamanho da fonte da numeração
width: 50px; ? largura da imagem (deve ser a mesma que corresponde a imagem)
height:50px; ? altura da imagem (deve ser a mesma que corresponde a imagem)
color: #fff; ? cor da fonte da numeração

Se quiser, confira algumas sugestões de ícones para comentários aqui.



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

42 Comentários

  1. Alex Piatti disse:

    Vanessa,

    Estou personalizando um novo template para meu blog e usarei o formulario de comentarios do facebook. O problema eh que os comentários do face não contabilizam no balão do blog. sei que a sintaxe que faz essa contagem é a seguinte:

    Saberia me informar como coloco esse trecho de código em meu XML? O blog de testes que estou personalizando é teste2geekstechnet.blogspot.com.br caso queira dar uma olhada.

    Ahhh, parabéns pelo belo blog. Seus post são ótimos.

    abs

  2. Wagner Almeida disse:

    Agora eu descobri como tirá-lo, mas o número que está dentro do balão não está como link, apesar da configuração de efeito Hover e tudo mais.

  3. Wagner Almeida disse:

    Eu estou terminado de configurar a template do meu blog a meu gosto, já tinha feito o que ensina nesse post – por outro site-, mas, quando terminei, percebi que ainda aparecia o link de contador no rodapé do post e eu queria retirá-lo.

    eu queria saber se você pode me ajudar ou se tem algum outro post que ensine como fazer isso. obrigado, abraços. Parabéns pelo site, pelos post e os acessos, muito legal!

  4. czar disse:

    Como fazer pra que isso fique no radapé?

  5. Michele Meine disse:

    Olá querida, td bem? Esta semana comecei um novo blog, fui fazer essa modificação e deu tudo certo, e eu adorei. MAASS, além de aparecer o balãozinho em cima, continua aparecendo embaixo escrito do lado do hack “leia mais” na página inicial, (por exemplo, “5 comentários”) e eu queria que aparecesse só o balãozinho; tem como fazer isso?
    beijinhos, o blog está de parabéns!

  6. Rhuan disse:

    eu não tou conseguindo colocar o numero dentro dentro da imagem… eu fiz uma imagem de tamanho 30px 30px, mas já mechi em tudo e não consigo, o numero vai pra cima vai pra baixa, mas pro lado não vai, e quando vai, indeendete do tamanho que eu coloque, ele se move uma distancia padrão,(usando float left) independente se eu coloco 100 ou 1 PX…
    pr favor me ajudem!

    • Vanessa disse:

      Tais recursos podem variar de template para template. Sendo assim, lamento, mas não tenho como te ajudar, de qualquer forma agradeço pelo comentário.

      • Rhuan disse:

        vlw, por responder… teria como você ,antes do post, colocar quais os templates que nos poderiamos usar. Obrigado!

  7. Lina disse:

    Amei! Isso chama a atenção do leitor, quanto mais comentários a postagens tiver, mais curioso ele fica.

    Amo as suas dicas!!! Beijuzzz

  8. .:: Clau ::. disse:

    Bruno
    Eu não sei te dizer pq não testei. Vc tem que tentar e testar ai pra ver se dá.

  9. Bruno||Punk disse:

    Ola clau tem como como fazer o link puxar para o final da pagina onde comenta?

  10. Naganuma disse:

    Olá Clau.
    Queria saber se dá para por o link de criar um comentário na imagem?

  11. ?? Mel disse:

    Como sempre,outra dica simples e fabulosa.
    Beijo da Mel

  12. Andrea Winchester disse:

    Muito bom Clau, funcionou perfeitamente, obrigada.

  13. 0yumi0 disse:

    Oii parabens pela postagem 😀 intendii tutoo XD vlww.

    eii me diz onde vc pega essa caixa de texto!! e mt bonita XD

  14. curiando disse:

    e como tira o comentário antigo? o que já tinha?

  15. Andson disse:

    nota 1000 valeu seu blog e muito legau.

  16. Vivendo pela Palavra de Deus!!! disse:

    Clau, boa noite, achei tão lindo esse balão, mas fiz como vc deixou as dicas e não apareceu, sera que o problema é o meu Templates, que não permiti, pois tem uma barra.

  17. .:: Clau ::. disse:

    Agnaldo
    Leia meu comentário de nº 11.
    Para o balão ficar ao lado direito, substitua float:right;
    por float:left;

  18. agnaldo disse:

    queria saber como colocar o balao abaixo da postagem no lado direito

  19. Admin disse:

    nao consegui por q?

  20. LOLXD disse:

    Já consegui :)
    obrigado por todas as boas dicas do blog
    visita o meu 😉
    beijo

  21. LOLXD disse:

    Ola :)
    consegui colocar a minha imagem e o numero mas, nao aparece o link no balão dos comentários :S
    que estará de errado ?

    obrigado antecipadamente 😉

  22. link disse:

    Uoll, agora que eu reparei que naquele código tem lá para deixar "URL DA IMAGEM" por isso que não estava conseguindo, isso me deixou bem CONFUSOOO!
    bem, agora que eu consegui, e vi que é fácil, APROVEI E RECOMENDO! vlw por mais essa dica clau?

  23. .:: Clau ::. disse:

    Lucas Rafael
    Margin-top ? se refere ao posicionamento da imagem ao topo. Vc pode tentar colocar um valor de margin que faça a imagem descer até o rodapé, ou então utiliza o proprio "comment-link" padrão do blogger, que aparece o link de comentários no rodapé.

  24. Lucas Rafael disse:

    Tem como colocar no rodapé?

  25. .:: Clau ::. disse:

    link
    O tutorial está bem explicado, é só vc inserir o endereço da sua imagem no local indicado.

  26. link disse:

    Éhhh, deu certo, mt obrigada MESMO^^…SÓ que eu não sei como colcoar a imagem atrás dele, como? ela fica invísivel, já q o fundo é branco SNIF! T.T

  27. New Perspective disse:

    Consegui fazer isso no meu blog teste no meu onde uso o draft n consegui tem outra forma de colocar o balaozinho usando o draft ?

  28. Antonio Vasconcelos disse:

    Eu queria que você me ajudasse, será que dá pra por esse mesmo balãozinho na parte debaixo da postagem?

  29. sosvip disse:

    Mais um tutorial de deixar maravilhado!
    Já estou fazendo uso Clau.
    Obrigadão!!!
    Abraço.

  30. Bideyks disse:

    Muito ùtil @@@!!!!!

  31. Senhor disse:

    Nao to achando =(

  32. ::Clau:: disse:

    @DAS:
    Eu tb vou aplicar este recurso aqui no blog, é que ainda não tive tempo esses dias pra terminar de mexer em algumas customizações que pretendo fazer…
    Que bom que gostou!
    Bjks…

  33. Das disse:

    Oi, Clau!
    Que dica ótima… mais uma! rsrs
    Eu fiz e deu super certo! \o/
    Valeu, amiga…
    Um beijo enorme!
    dani

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.