18 de out. de 2013

Número de comentários dentro de um balão

 Hoje trago mais um tutorial para personalizar seu blog.
Sabe o balão com número de comentários que vemos em vários blog? Hoje vou ensinar como colocar em seu blog.
No HTML de seu blog pressione as teclas ctrl f ao mesmo tempo para abrir a caixinha de busca, cole dentro dela:
<class='post-title entry-title'>
Se não encontrar esse código procure por:
<b:includable id='post' var='post'>
Quando encontrar coloque o seguinte código logo abaixo dele:
<span class='post-comment-link-arriba' style='background: url( URL DO BLÃO ) no-repeat top right; width: LARGURA DO BALÃO px; height: ALTURA DO BALÃO px; text-align:center; float:right;padding-top:10px'>

<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>
Lembre-se que em margin-top números negativos sobem e positivos descemJá em margin-left números positivos vão para a direita e negativos para a esquerda.
Outro modo para colocar o número de comentários dentro de um balão:
Coloque o seguinte código acima da tag ]]></b:skin> :
.comment-bubble { float: left; /* posicionamento a direita, pode mudar para right*/width : 70px; /*largura do balão*/height : 80px; /*atura do balão*/background : url( url da imagem do balão) no-repeat;font-size : 30px; /*tamanho da fonte do número de comentários*/margin-top: -19px; /*margem em relação ao topo, ajuste o nº se precisar*/margin-left: 10px; /*margem em relação ao lado esquerdo, ajuste o nº se precisar*/padding: 3px; /* espaçamento interno*/text-align : center; /*texto centralizado*/}
Mais uma vez lebrando que: margin-top - números negativos sobem e positivos descemJá em margin-left-  números positivos vão para a direita e negativos para a esquerda.
Agora procure por:
<b:includable id='post' var='post'>
Logo abaixo do código acima coloque:
<b:if cond='data:post.allowComments'> <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if>

Balões para colocar o número de comentários, visualize

10 comentários :

  1. Adorei *-*
    Vou usar no meu próximo layout ><

    ResponderExcluir
  2. Oii, eu nunca consigo alterar nada, pois, toda vez que eu aperto CTRL+F e digito não aparece nada. O que eu faço?
    Beijinhos, e obrigada :D

    ResponderExcluir
    Respostas
    1. Queila, com o lado direito do mouse clique dentro do html de seu blog e aperte no seu teclado
      ao mesmo tempo as teclas ctrl f que vai aparecer a caixinha de pesquisa.

      Excluir
  3. Eu tava enjoada do meu balãozinho há tempos e não encontrava uns tão bonitos como eses em lugar algum! Muito obrigada, pode ver no meu lay como ficou: ingridgleize.blogspot.com *-*

    ResponderExcluir
    Respostas
    1. Olá Ingrid, fico feliz que tenha gostado dos balões.
      Ficou lindo.
      Já estou te seguindo.

      Excluir
  4. Claudine , aonde eu coloco o " URL " do balão ?!

    ResponderExcluir
    Respostas
    1. Gabriely, onde tem:
      .comment-bubble {
      procure que tem onde colocar o URL da imagem do balão.
      Para ter o URL do balão, você tem que hospedar a imagem do balão
      em um site de hospedagem de imagens.

      Excluir
  5. Não consigo fazer isso :// Fica aparecendo que no "Blog1" não aceita um termo do código. o "b:if"

    ResponderExcluir
    Respostas
    1. Tatiane, os dois modos foram testados.
      Tente outra vez.

      Excluir

Qualquer dúvida pergunte que
responderei com prazer.
Só peço que seu comentário
seja relacionado à postagem.

© Princess Tutoriais- Agradece sua visita
2014. Todos os direitos reservados
Pedidos? dúvidas? nos comentários ou na Ask.
imagem-logo