#tutorial: Balão com comentários numerados

Começando nossa #tag Tutorial, vou mostrar pra vocês como colocar um balãozinho melhorado do lado do post. Eu sofri e levei tempo pra arrumar aqui no blog, então trouxe outro código pra vocês que sofrem como eu, entenderem. Bora conferir?

Antes de tudo, faça um backup do seu template PELOAMORDEDEUS! Vai que algo dá errado né, não arriscaremos.
Abra o blogger e clique em modelo → editar HTML → Expandir Modelos de widgets

Procure pelo seguinte código
<b:includable id='post' var='post'>
Abaixo dele cole esse código:
<span class='post-comment-link-arriba' style='font-size:24px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG4UyMnnMXS9eIVjY-Xmi38I5XubO2PAhTsLgF9xVYOZjWyWmTrEllqK2oxs2LC-hoOmnc6LjVsbTo4DBhveD3bxx9LdExnXbJZgg8s-N58tZ0vO0UlhopnZznbD8YOCruSqG1nWWlJ6o/s400/bubble.png) no-repeat top right; width:48px; height:48px; text-align:center; float:right; margin:5px 0 0 0; padding:5px 7px 0 5px;'> <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> 
Você pode alterar os seguintes códigos:

Imagem:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG4UyMnnMXS9eIVjY-Xmi38I5XubO2PAhTsLgF9xVYOZjWyWmTrEllqK2oxs2LC-hoOmnc6LjVsbTo4DBhveD3bxx9LdExnXbJZgg8s-N58tZ0vO0UlhopnZznbD8YOCruSqG1nWWlJ6o/s400/bubble.png

E alterando a imagem você deve mudar os tamanhos: 

width:48px; height:48px; text-align:center; float:right; margin:5px 0 0 0; padding:5px 7px 0 5px;

A minha imagem é usada no tamanho 90x80

No site Find Icons tem muitos balões pra você! Veja outros balões aqui

Visualize e se estiver tudo certo, pode salvar! 


Nenhum comentário:

Postar um comentário

O comentário é livre, porém não utilizes de palavrões ou qualquer ofensa.
Moderado pois assim poderei te responder rapidamente.

© Patricia Bernardo Blog - 2016 | Todos os direitos reservados.
Desenvolvimento por: Jaque Design | Tecnologia do Blogger.
imagem-logo