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 descem. Já 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 descem. Já 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