29 de outubro de 2011

9

Balão de número de comentários ao lado do titulo da postagem

Um balão com o número de comentário deixado em um post em seu blog, já pensou?
Essa ferramenta, é muito bom, pois além de dar um aspecto elegante ao seu blog, pode atrair mais comentários, ou até mesmo estimular os seus leitores lerem o que outras pessoas deixaram de comentários em um post seu.
Isso deixa seu blog ainda melhor e muito mais bonito.



Veja abaixo uma imagem de exemplo:

 Link do Tutorial da imagem acima Aprenda como colocar Postagens Populares em seu blog

Para colocar esse código no seu blog, siga as instruções abaixo:

- Entre no Painel de controle de seu blog, vá em Design >> Editar HTML e selecione a opção "Expandir modelos widgets".

- Agora pressione as teclas Ctrl+F e procure pela seguinte linha abaixo:

<b:includable id='post' var='post'>
ou se não encontrar o código anterior, procure pela linha seguinte;

 <class='post-title entry-title'>
ou apenas por;

 post' var='post'>
 Os códigos que eu citei acima, depende de seu template, geralmente os templates novos usam a 2ª opção.

Logo depois que coloque o código abaixo da linha encontrada:

 Balão 1

<span class='post-comment-link-arriba' style='background: url(http://2.bp.blogspot.com/_qgZA1ny_dAs/TAMD0pviQsI/AAAAAAAAEQE/wIJ6xT5MjFA/s400/bubble.png) no-repeat top right; width:48px; height:48px; text-align:center; float:right;padding-top:8px'>
<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>

 Balão 2


<span class='post-comment-link-arriba' style='background: url(http://2.bp.blogspot.com/-phyi-tUekDs/Tqw8b_F_qgI/AAAAAAAAAZE/cAB47dRdDQU/s1600/chat-icon.png) no-repeat top right; width:48px; height:48px; text-align:center; float:right;padding-top:8px'>
<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>
Disponibilizamos estes 2 balões, que ficam ótimos na maioria dos templates.

Caso você gostaria de trocar a imagem do balão, você terá que fazer o seguinte:


A parte sublinhada em vermelho, você poderá substituir por outra imagem do balão.


Como posicionar corretamente o número de comentários dentro do balão
A tag padding-top:8px é responsável pelo posicionamento do nº de comentário dentro do balão, para isso altere esse valor por outro, e antes de salvar o modelo clique em visualizar para ver se está sendo centralizado (no meio do balão).


Qualquer dúvida, deixe nos comentários.

Créditos ao Dicas para Blog

9 Comentários:

Anônimo disse... [Responder Comentário]

deu certo

Adriana Helena disse... [Responder Comentário]

Bruna, querida!
Você é um gênio! Um menina tão novinha e precoce!!!
Caramba, como conseguiu aprender essas coisas sozinhas linda?
Te agradeço tanto ,mas tanto.. acabei de colocar o balãozinho azul no meu blog... FICOU MUITO FOFO! Sua explicação foi perfeita.. pois eu sempre tive medo de inserir esses códigos HTML no blog e dar uma coisa errada e deu CERTO !
Muito obrigada querida!
Seu blog vai ser um SUCESSO!
E se depender de mim arranjou uma fã para te recomendar em todas as áreas !
Beijos!!!

Bruna T. Marques disse... [Responder Comentário]

@Adriana Helena, agradeço pelos elogios. Eu tenho grandes inspirações, como o Marcos Lemos do Ferramentas Blog, ele é um ótimo blogueiro. Aprendi esses códigos, vendo videos no Youtube, especificamente explicações de como, e implementar esses códigos. O balão nº 2, fui eu mesma que modifiquei, fiz os testes e deu certo. Fico muito agradecida mesmo, por ter gostado do meu trabalho.

Antônio José Ramos Alves disse... [Responder Comentário]

Dê uma olhadinha em meu blog e deixe seus comentários abaixos das mensagens, e se quizer segui-me ficarei muito feliz! Bjs e abraços fraternais! Mensagem espírita, espiritualista e de auto-ajuda. Antônio Ramos.

Anônimo disse... [Responder Comentário]

Como que poe esses balões no final da postagem ? E deixar apenas o titulo da postagem sem esses baloes ?

Anônimo disse... [Responder Comentário]

grande Garotinha... gostei muito do seu Blog... acho que a única coisa que realmente falta na maioria dos seus posts é um enriquecimento do assunto com maior retenção dos seus visitantes é uma maior comunicação através de imagens...( você falou que gosta de desenho/portanto de imagens)...faça páginas exemplos e copie e cole... sanará dúvidas e dará volume na pág... ficará mais pesada? creio que sim... então dê links para pessoa abra caso queira... abç e muita alegria... com certeza irá muito longe...
rodolfo

timcocacola disse... [Responder Comentário]

muito legal vei

Unknown disse... [Responder Comentário]

Fiz tudo certinho e deu certo, mas no balãozinho o número dos comentários no seu site é tipo um link, mas no meu não, aparece só o numero. Como faço para ficar igual ao seu?

bjss

Anônimo disse... [Responder Comentário]

Só funciona para comentários nativos do Blogger...ele não conta comentários do Google+

Postar um comentário

Parcerias são feitos em suas respectivas páginas.
- Se deseja falar com nossos autores, criticar ou sugerir, solicite nosso
Formulário de Contato
- Evite divulgar o seu blog nos comentários para que ele não seja excluído por nosso autor.
- Não utilize linguagem vulgar e tente falar sobre algo que esteja ligado ao artigo.

Licença Creative Commons
Free Page Rank Tool