9.8.13

Balões Personalizados com o número de comentários


Oi oi, boom galera pesquisei por mais um tutorial pra ajuda na decoração do blog de vocês, esse tutu super legal, que é colocar um balão personalizado com o número dos comentários. É uma forma de conseguir mais comentários no seu blog já que incentiva os leitores a comentar e é bem bonitinho também. Ficará mais ou menos assim:



espero que gostem! Para conferi o tutorial é só clicar em leia mais>

vá no seu HTML marque a opção expandir modelos de widgets  pressione as teclas CTRL F e pesquise por:                        <class='post-title entry-title'>  
Se não encontrar pesquise por:     <b:includable id='post' var='post'>    

 Então coloque esse código logo abaixo, do código destacado (de laranja)
<span class='post-comment-link-arriba' style='background: url(http://i.imgur.com/lfGb2.jpg) no-repeat top right; width:90pxheight:80px; text-align:center; float:right;padding-top:19px'>
<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>

Ficando assim: 
           
Alguns trechos editaveis e como trocar a imagem do balãoMini gif 161                 
 Trocar a imagem do balão no trecho: (http://i.imgur.com/lfGb2.jpg) apague e coloque a URL da imagem desejada (só apague onde está grifado de azul)

Algumas imagens que eu fiz:
                

''Para pegar a URL de uma imagem é só clicar com o botão direito do mouse sobre ela e selecionar a opção COPIAR URL DA IMAGEM''

Eu quero fazer o meu próprio balão pode? Claro mais não se esqueça de ajustar o código para o mesmo tamanho da sua imagem ta! por exemplo as imagens que eu fiz tem a resolução 90x80

- no trecho: width:90px corresponde a largura 
- no trecho: height:80px corresponde a altura
- no trecho: padding-top:19px Corresponde ao numero que fica dentro do balão portanto altere esse valor até o numero de comentários ficarem na posição correta, lembre-se esse código muda a posição no sentido vertical (para cima e para baixo)

fonte: JD

Se copiar, favor deixar os créditos. Plágio é crime!

4 comentários:

  1. Ei... não consigo achar os seus HTML's... o que há de errado??

    maahdicas.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Você deve ter apagado o código, ou o seu modelo blogger não é compatível.

      Excluir
  2. Não estou encontrando , pois o blogger ta novo então , não sei como espandir os widgets ! help!

    http://s2-world-girls-s2.blogspot.com/

    ResponderExcluir
    Respostas
    1. Agora não tem mesmo a opção de "expandir os widgets" então é só você apertar o "Ctrl + F" dentro da caixinha de código e procurar os códigos lá que agora vai tudo direto, é muito fácil, qualquer coisa é só me perguntar.
      Beijos :*

      Excluir

- Se tive alguma dica, diga! =)
- Alguma dúvida ou algum pedido? Comente!
- Sim, visito o seu blog, mande o link! =D
-Favor não ofender ninguém, elogios e criticas são bem vindos, mas mantem o respeito!
Obrigada, MB!

Copyright © 2016 | Design e Código: Mistério do Brilho e Sanyt Design | Tema: Viagem - Blogger | Uso pessoal • voltar ao topo