Postagens Vanessa S.
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.
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.
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
Desculpa, mas não sei te informar não.
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.
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!
Eu não tenho tutorial publicado, mas já anotei nas sugestões para providenciar.
Obrigado,Vanessa.
Como fazer pra que isso fique no radapé?
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!
Experimenta usar a condicional para aplicar estilos a página inicial. (Leia o tutorial)
Arrumei, na verdade usando a condicional para ocultar o rodapé =D Obrigada
Que bom que deu certo 😉
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!
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.
vlw, por responder… teria como você ,antes do post, colocar quais os templates que nos poderiamos usar. Obrigado!
Impossível!! Vc tem ideia da quantidade de templates que existem na web? Impossível lista-los!
Amei! Isso chama a atenção do leitor, quanto mais comentários a postagens tiver, mais curioso ele fica.
Amo as suas dicas!!! Beijuzzz
Bruno
Eu não sei te dizer pq não testei. Vc tem que tentar e testar ai pra ver se dá.
Ola clau tem como como fazer o link puxar para o final da pagina onde comenta?
Olá Clau.
Queria saber se dá para por o link de criar um comentário na imagem?
Como sempre,outra dica simples e fabulosa.
Beijo da Mel
Muito bom Clau, funcionou perfeitamente, obrigada.
Oii parabens pela postagem 😀 intendii tutoo XD vlww.
eii me diz onde vc pega essa caixa de texto!! e mt bonita XD
e como tira o comentário antigo? o que já tinha?
nota 1000 valeu seu blog e muito legau.
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.
Agnaldo
Leia meu comentário de nº 11.
Para o balão ficar ao lado direito, substitua float:right;
por float:left;
queria saber como colocar o balao abaixo da postagem no lado direito
nao consegui por q?
Já consegui 🙂
obrigado por todas as boas dicas do blog
visita o meu 😉
beijo
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 😉
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?
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é.
Tem como colocar no rodapé?
link
O tutorial está bem explicado, é só vc inserir o endereço da sua imagem no local indicado.
É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
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 ?
Eu queria que você me ajudasse, será que dá pra por esse mesmo balãozinho na parte debaixo da postagem?
Mais um tutorial de deixar maravilhado!
Já estou fazendo uso Clau.
Obrigadão!!!
Abraço.
Muito ùtil @@@!!!!!
Nao to achando =(
@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…
Oi, Clau!
Que dica ótima… mais uma! rsrs
Eu fiz e deu super certo! \o/
Valeu, amiga…
Um beijo enorme!
dani