sábado, 9 de julho de 2011

Balão de comentários

Eu já deixei por aqui algumas dicas para personalizar ainda mais seu blog deixando com sua carinha. Agora vou deixar mais uma dica bem facinha pra que vocês mesmos possam fazer.
O balão de comentário fica logo ao lado do título da postagem informando quantos comentários essa postagem já recebeu.
Primeiro vá em Design, escolha EDITAR HTML, agora marque a opção expandir widget.
Clique na imagem para ampliar.


Agora clice as teclas Ctrl+F para abrir a caixa de pesquisa e procure por: <b:includable id='post' var='post'> Em destaque aparecerá o resultado da sua pesquisa, clique na imagem para ampliar.

Agora coloque o código logo abaixo de: <b:includable id='post' var='post'>
<span class='post-comment-link-arriba' style='background: url(endereço da sua imagem aqui) no-repeat top right; width:48px; height:48px; text-align:center; float:right;padding-top:8px'>
<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>

Note que a parte destacada em vermelho é o local onde você deve inserir o endereço da imagem do seu balão, para conseguir esse endereço basta você escolher seu balão aqui nessa postagem, clique sobre ele que a imagem abrirá em outra página. Copie o endereço na barra de link e copie clicanco Ctrl+C depois você retorna ao código e entre os parênteses () você tecla Ctrl+V.
A parte que está destacada em azul mostra a largura e altura do seu balão, você pode ajustar se acaso sua imagem ficar cortando. Aqui no meu blog eu usei 60px, 58px. Mas em outros casos já usei até valores bem maiores.
Depois tem que fazer esse outro passo:
Pesquise novamente na caixa de pesquisa: }]]></b:skin>
Colocar abaixo do estilo body, mas eu coloquei antes de }]]></b:skin> e deu certinho:
.post-comment-link-arriba a{color:# fefbfc;font-size:18pt}
.post-comment-link-arriba a:hover{color:#
fefbfc;text-decoration: underline overline}
Agora vá até o final da página e clique para visualizar, só salve depois que estiver do jeitinho que você quer.
Aqui deixo as imagens dos balões para que você escolha a que melhor combina com seu blog, caso queiram em outras cores é só me pedir por comentário.
 
 
 
Se restar alguma dúvida estarei aqui e farei o possível para ajudar. Bjokitas aos amigos, seguidores e visitantes!!

10 comentários:

Pintôô 7 Bordôô 8 disse...

Hum, vou dá uma olhadinha depois com mais calma pra ver se faço no meu adoro tudo bonito vc sabe, ne? No momento minha mãe esta aqui me fazendo de DJ, me pedindo pra achar uns cantores do tempo dela, rsrs. Agora "estamos curtindo Evaldo Braga"

Conhece??? :D
Beijossssssssssss
Saudds de vc loira

ROSÂNIA disse...

Amiga,
Lá no meu blog tem o meu selinho pra ti viu? Na quinta postagem .Tenho um blog só de selinhos ,sorteios e links
Vou levar seu link pra por lá pra divulgação do seu lindo blog!
bjo,
Rô(Artesarô)

Pintôô 7 Bordôô 8 disse...

Consegui :D
Queria msm o que tem escrito comentarios mas quando fui diminuir perdeu a qualidd. Beijin

Denise David disse...

Oi, amiga!
Eu bem que queria aprender a fazer isso lá no meu!
Vou tentar!
Beijocas, dinda de blog!!!

♥ Aline ♥ disse...

Como faço pro número dentro do balão ficar maior??? porque no meu blog está pequeno do tamanho das letras do meu post.
aguardo retorno meu e-mail: alinemorais1990@yahoo.com

my Belle Essence disse...

Minha flor, deu certo, mas como vc, tive que colar antes de .
Obrigada por ter me ensinado.

Quanto a dúvida da ALINE... no meu o número também ficou pequeno. Então fiz uma pequena alteração: onde tem -top:8px'> coloquei top:18px' e ficou legal.
Espero ter ajudado de alguma forma.

Ahhh, já tá rolando aquele SORTEIO no meu bloguinho de um Perfume Artesanal da my Belle Essence. Passa lá e participa.

Bojcas, Simone Viana

Ila maria disse...

Super amei flor usei no meu...obrigada...bjks

Gaby disse...

Oiii,Nikita você não tem outros modelos?

Anônimo disse...

Adorei e estou usando no meu blog uma das imagens que tu disponibilizou. Obrigada!

Unknown disse...

Muito obrigada por me ajudar, pesquisei em outros blogs e nada dava certo!
Até que enfim consegui
Abraço

Lista de Blogs:

Meu maior tesouro: Família!

Minha shihtzu:

PitaPata - Personal picturePitaPata Dog tickers

Recadinhos:

Tecnologia do Blogger.