Balão com número de comentários

22 jan

– Entrar em Layout, mancar expandir modelos de widgets;

– Procurar pela linha (digite Ctrl+F) <b:if cond=’data:post.title’>

– Sob essa linha, cole o código abaixo:

<span class=’numComments’><b:if cond=’data:post.allowComments’><a expr:href=’data:post.addCommentUrl’><data:post.numComments/></a></b:if></span>

Em seguida, apliquei estilos à nova “class”.

Obs.: Hospede uma imagem como a que usei num site e copie o link. Uma sugestão é buscar um ícone no Iconspédia.

– Procure por /* Comments e abaixo cole o código:

Código fornecido pela Rô:

.numComments {
background: transparent url(http://endereço da imagem) no-repeat top right;
float:right; /* flutua o balão à direita */
text-align: center;
margin: -10px 23px 20px 0px; /* coloque as medidas de acordo com seu template */
padding: 8px 0 0 0; /* padding para imagem de 50px por 50px */
font-size: 150%; /* fonte para imagem 50 x 50 */
width: 50px; /* largura da imagem */
height:50px; /* altura da imagem */
font-family: Georgia, Sans-serif; /* fonte para o número */
}
.numComments a:link{
color: #f8f8f8; /* cor do número para link ativo */
}
.numComments a:visited{
color: #ff6600; /* cor do número para link visitado */
text-decoration:none;
}
.numComments a:hover{
color: #ff6600; /* cor do número com mouse-sobre */
}

Código que estou usando:

.numComments {
background: transparent url(http://dl.getdropbox.com/u/664055/Template%20-%20M%C3%ADnima/Chat_48.png) no-repeat top right;
float:right; /* flutua o balão à direita */
text-align: center;
margin: -10px 23px 20px 0px; /* coloque as medidas de acordo com seu template */
padding: 8px 0 0 0; /* padding para imagem de 50px por 50px */
font-size: 150%; /* fonte para imagem 50 x 50 */
width: 50px; /* largura da imagem */
height:50px; /* altura da imagem */
font-family: Georgia, Sans-serif; /* fonte para o número */
}
.numComments a:link{
color: #f8f8f8; /* cor do número para link ativo */
}
.numComments a:visited{
color: #f8f8f8; /* cor do número para link visitado */
text-decoration:none;
}

Obs.: preferi alterar o código deixando-o como está acima. Assim, o número fica sempre branco, mesmo quando o mouse está sobre ele. Se quiser uma outra cor, use o site Color Combos.
Não se esqueça ainda de dimensionar corretamente a imagem.

– Mesmo fazendo tudo isso, a indicação do número de comentários permanece abaixo da postagem. Para retirá-la, elimine o trecho abaixo:

<span class=’post-comment-link’><b:if cond=’data:blog.pageType != “item”‘><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 Comentário><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>

É isso. Não deixe de visitar o blog onde está o tutorial, mas como todos sabem, a Rô, agora, escreve no Bloggersphera.

FONTE: http://www.blogdobauru.com.br

Uma resposta to “Balão com número de comentários”

  1. Elaine Oliveira janeiro 26, 2011 às 7:04 am #

    entãooo gata, eu segui um código idêntico ao seu, mas não aparece somento número de comentários, aparece numero e “comentários” do lado” no primeiro post e nos outros “1>” (um comentário e essa 'seta') …

    Sabe como ajudar?????

    obrigaaada!

    agiteantesdeusar2@blogspot.com

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: