28 de fev. de 2014

Colocar balão com número de comentários no fim do post

Olá galerinha, como vocês estão? Eu estou bem. Trouxe mais um tutorial para vocês, este
foi um pedido de Caroline Oliveira. Como colocar o balão com número de comentários
no final de cada postagem. Vamos ao tutorial?

Testei no meu blog de teste e o melhor modo é esse:

No html de seu blog procure por:

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>

Abaixo deste código tem este outro:

  <data:post.body/>

Após este coloque:

<span class='post-comment-link-post' style='background: url(URL DO BOTÃO) no-repeat top right; width: LARGURA px; height: ALTURA px; 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> 

Onde tem:
background: url(URL DO BALÃO)- coloque o url de seu balão;
width: LARGURA px- coloque a largura o balão;
height: ALTURA px- coloque a altura do balão;
padding-top:8px- altere o valor até o número ficar centralizado.

4 comentários :

  1. Legal! Vou testar no meu.

    ResponderExcluir
    Respostas
    1. Lígia, fico feliz que tenha gostado.
      Qualquer dúvida pergunte.

      Excluir
  2. Oi flor! Estou procurando um tuto que substitua o escrito "Um comentário", pela imagem do balão. Não sei se não fiz certo, ou se ele realmente não substitui hehe
    Pode me ajudar?
    Estou iniciando com o blog, o comentário que tem é de teste ^^"

    moraradois.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Olá Cristina, seja bem vinda.
      Você quer colocar um balãozinho no texto x comentários? É isso?
      Se for, procure no html de seu layout a parte onde está os comentários e
      encontre esta parte. Geralmente está assim:

      #comments h4,
      #comments .comment-author a,
      #comments .comment-timestamp a {
      text-align: center;
      font-family:Play; /* fonte da frase "x comentários" */
      font-weight: normal;
      font-size: 14px;
      color: #F0B4C1; /* cor da frase "x comentários" */

      Apague e coloque:

      #comments{overflow:hidden}
      #comments h4{display:inline;padding:10px;line-height:40px}
      #comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
      #comments h4,.comments .continue a{background:#COR DE FUNDO DO BALÃO}
      #comments h4,.comments .user a,.comments .continue a{font-size:16px}
      #comments h4,.comments .continue a{font-weight:normal;color:#COR DO TEXTO}
      #comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #COR DA BORDINHA DO BALÃO;border-right:20px solid transparent;width:0;height:0;line-height:0}

      Espero que tenha ajudado.

      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