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='"post-body-" + 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.
Legal! Vou testar no meu.
ResponderExcluirLígia, fico feliz que tenha gostado.
ExcluirQualquer dúvida pergunte.
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
ResponderExcluirPode me ajudar?
Estou iniciando com o blog, o comentário que tem é de teste ^^"
moraradois.blogspot.com.br
Olá Cristina, seja bem vinda.
ExcluirVocê 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.