22/07/2012

Tutoriais e Materiais : Balões Personalizados com o número de comentários .

Sabem aqueles balões que ficam mais ou menos na mesma altura do Título do Post com o número de comentários ? Então , vamos aprender ?
Vá no seu HTML , marque a opção expandir modelos de widgets  , Ctrl + F ou F3 e pesquise por :     <class='post-title entry-title'>  
Se não encontrar pesquise por:     <b:includable id='post' var='post'> 
Cole o código abaixo , depois da Tag destacada :
<span class='post-comment-link-arriba' style='background: url(http://i.imgur.com/lfGb2.jpg) no-repeat top right; width:90pxheight:80px; text-align:center; float:right;padding-top:19px'>
<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>
Ficando assim :
Trocar a imagem do balão no trecho: (http://i.imgur.com/lfGb2.jpgapague e coloque a URL da imagem desejada (só apague onde está grifado de azul) .
Alguns balões para vocês :
                            
http://i11.photobucket.com/albums/a168/evelynregly/minigifs/miniok.gif no trecho: width:90px corresponde a largura .
http://i11.photobucket.com/albums/a168/evelynregly/minigifs/miniok.gif no trecho: height:80px corresponde a altura .
http://i11.photobucket.com/albums/a168/evelynregly/minigifs/miniok.gif no trecho: padding-top:19px Corresponde ao número que fica dentro do balão por tanto altere esse valor até o numero de comentários ficarem na posição correta, lembre-se esse código muda a posição no sentido vertical (para cima e para baixo) .
Créditos : (www) .


4 comentários:

  1. oii,adoreiii muitoo o tuto,vou usar no meu próximo lay,aliás,você podia seguir meus blog e me ajudar na minha meta??

    http://meusdesenhosmanghoradeanime.blogspot.com.br

    http://meusdesenhosmang.blogspot.com.br/

    ResponderExcluir
  2. Oiie amei o tuto, perfeito, ameii seu blog!!

    alinecdas.blogspot.com

    ResponderExcluir

-Primeiro , não não peça Tutoriais / Materiais pelos comentários , use a Ask - me .
-Não desrespeite ninguém , tenha educação .
- Comente sobre o post .
- Deixe a sua url no fim do cometário para que eu posso lhe retribuir o mesmo .