02 julho 2013

7

Como colocar Balão Personalizado com o numero de comentários do lado do titulo do post.



Olá Cerejinhas. Hoje eu vou ensinar pra vocês como colocar um balão personalizado com o número dos comentários no seu blog. Ficará mais ou menos assim:


confira o tutorial clicando em continue lendo 


vá no seu HTML   pressione as teclas CTRL+F e 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 o link da imagem desejada (só apague onde está grifado de azul)


                

''Para pegar o link da imagem é só hospedar ela no site de hospedagem de imagens ok Clique aqui para ir até o site de hospedagem de imagens. "

Gabriela 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)

É isso pessoas! dúvidas comente
Espero ter ajudado Beijos e até a próxima...


7 comentários:

  1. MUUUUUUUUUUITA OBRIGADA amei o tuto

    ResponderExcluir
  2. Obrigada flor,me ajudou de verdade.Amei demais o blog,já estou seguindo!

    ResponderExcluir
  3. Adorei, me ajudou Muito <3
    Se der dá uma passadinha no meu blog: meioromantica.blogspot.com.br

    ResponderExcluir
  4. AMEI! Já adicionei ao meu blog e ficou super fofo! Muito obrigada!

    Tenho uma pergunta. Tem como mudar a cor do número e o tamanho dele também?

    Se der, vai lá no meu blog conferir! Ficou fofo!
    www.alinercosta.blogspot.com

    ResponderExcluir
  5. Olá já sigo o blog se puder retribuir !

    aceita afiliação?


    http://gatamanhosa21.blogspot.com.br/

    ResponderExcluir
  6. Ameiii!! Obrigada pela dica!

    www.dicaediva.com

    ResponderExcluir

-Antes de falar sobre qualquer outra coisa, comente sobre o post.
- Alguma dúvida ou algum pedido? Comente!
- Sim, visito o seu blog, mande o link! =)
-Favor não ofender ninguém, elogios e criticas são bem vindos, mas mantenha o respeito!
- Obrigada, GR!