Comentários dentro de uma imagem

Olá amigas blogueiras. 
Primeiramente gostaria de agradecer a cada uma de vocês, pelos comentários, e-mails e elogios que vocês tem feito ao MUNDO DE BLOGUEIRA. 

Fico feliz em ver que nosso blog está ajudando vocês. Caso vocês tenham alguma duvida ou queiram algum tutorial, entrem em contato comigo, através do formulário de contatos, ficarei feliz em ajudar-las.Recebi um e-mail da Julia, onde ela pede para que eu explique como colocar os comentários dentro de uma imagem, ou balão, como usamos aqui no blog. Então resolvi fazer um tutorial para vocês.

É bem fácil, basta seguir com atenção os seguintes passos.

OBS: não esqueça de fazer um backup do seu blog, para evitar problemas futuros.

Vá no seu blog, MODELO, EDITAR HTML e busque (CTRL + F ), por :

]]></b:skin>

Acima dele cole o seguinte código :

.comment-bubble { float: left; /* POSICIONAMENTO */ width : 78px; /*LARGURA DA IMAGEM */ height : 83px; /*ALTURA DA IMAGEM */ background : url (URL DA IMAGEM) no-repeat; font-size : 32px; /*TAMANHO DA FONTE*/ margin-top: -19px; /*MARGEM DO TOPO*/ margin-left: 10px; /*MARGEM LADO ESQUERDO*/ padding: 3px; /*ESPAÇO INTERNO*/ text-align : center; /*TEXTO CENTRO*/ }

Agora procure por :

<b:includable id='post' var='post'>

Abaixo dele cole o seguinte código:

<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>

Caso dê erro, substitua o código acima por :

<b:includable id='post' var='post'><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>...</b:incluable>

Baixe o seu balão, se usar dê créditos.

Não esqueça de hospedar a imagem, para que ela possa aparecer corretamente em seu blog. Não sabe como hospedar imagem? Clique aqui e veja o tutorial.