Botões e ícones de comentários no Blogger


A primeira coisa que fiz foi criar o botão POSTAR UM COMENTÁRIO, no site Buttonator.com. Via Google Imagens procurei algum ícone para usar nos comentários e ajustei no GIMP em dois tamanhos diferentes, hospedei tudo no Blogger e anotei o endereço de cada imagem.

1 - Para incluir um botão de destaque para os comentários, entre na edição HTML do template e marque Expandir modelos de widgets (não esqueça do backup) e procure pelo trecho de código abaixo:
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/>
</a>
</p>
</b:if>
Substitua o trecho em vermelho acima, pelo azul abaixo, adaptando conforme a necessidade:
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<img src='http://PostarComentario.png'/>
</a>
</p>

</b:if>
2 - Para destacar a área de comentários nas páginas de artigos individuais, localize o trecho abaixo e inclua a linha destacada em vermelho adaptando conforme o endereço da sua imagem:
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<img src='http://IconeComentario.png'/>
<b:if cond='data:post.numComments == 1'> 1 Comentário: <b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>
3 - E para dar algum destaque aos comentários na página inicial:
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<img src='http://IconeComentarioPequeno.png' style='vertical-align: middle;'/>
<b:if cond='data:post.numComments == 1'>1 Comentário <b:else/> <data:post.numComments/> <data:top.commentLabelPlural/> </b:if></a>
</b:if>
</b:if>
</span>
P.S.: Também substituí os ícones de navegação no rodapé das páginas por imagens maiores e mais bonitas. Criadas pelo designer carpicon e licenciadas sob GPL fazem parte do pacote de ícones Black + White para o KDE.

Comentários

  1. pow cara legal esse blog eu consegui fazer fácil fácil e aproveitando a postagem sobre ícones deixa eu perguntar como que vc fez pra adicionar um ícone no link do blog para enviar por email ? ficou show de bola o desenho do email no lugar do link e outra coisa é possivel adicionar o comando (target="_blank) para o "enviar por email" aparecer em nova aba ? responde pra min , vo durmi agora amanhã eu passo aki , fuis-me

    ResponderExcluir
  2. ah, também vou querer aula!

    ResponderExcluir
  3. Carlão,

    Pensei que o texto estivesse bem claro... Me diga qual a parte em russo que eu mesmo faço a tradução ;-)

    Anônimo(a)
    Gostaria que você se identificasse, pois depedendo do que você tenha pra me oferecer em troca, posso pensar em te ensinar algumas coisinhas. Se é que me entende...

    []'s
    Compulsivo

    ResponderExcluir
  4. haha se você ensinar eu assino o seu feed =P pow ensina ai não custa nada eu não tenho nada a lhe oferecer se ensinar eu te do um doce :( e eu não entendi o trocadilho ""posso pensar em te ensinar algumas coisinhas. Se é que me entende.."" não entendi desculpa sou burra :(, to pedindo né se nao puder ensinar eu vou entender :( fuis-me mais depois eu volto

    ResponderExcluir
  5. Olá Anônima! (Eba!!!!)

    Agora que já sabemos o seu gênero, fica mais fácil conversar ;-) Mas claro sem terceiras intenções...

    1 - Pra adicionar o ícone para receber atualizações por e-mail, você precisa usar o FeedBurner. Depois é só criar o link usando o endereço fornecido pelo serviço.

    Quanto a usar o target="_blank", sim você pode embora eu não recomende. Se o leitor quiser abrir em nova janela ele tem essa opção via browser.

    Acho que é melhor "prender" o leitor por causa do seu conteúdo e não através de estratégias rasteiras como o target="_blank".

    P.S. Qual seu blogue?

    []'s
    Compulsivo

    ResponderExcluir
  6. esse serviço de cadastrar email do FeedBurner eu conheço acabei de asinar seu blog por ele..,digo o link para enviar postagens por email que o pro pio blogger fornece (http://www.blogger.com/email-post....)akele que pode ser habilitado nas configurações do blog , eu tenho ele ativado no meu blog como link gostaria de por um icone personalizado tipo o seu

    http://img262.imageshack.us/img262/3912/emaileg6.jpg,

    encontrei uns ícones lindos na net
    mais eu nao sei onde fica essa linha no código do template , fala pra min onde fica em em em , e sobre meu blog ainda não tenho estou fazendo um aos poucos to estudando todo o esquema do blogger para nao dar zebra futuramente

    ResponderExcluir
  7. Anônima,

    Já expliquei isso em outro artigo:

    Enviar artigo por e-mail no Blogger

    De agora em diante, primeiro você pesquisa, depois pergunta, ok?

    []'s
    Compulsivo

    ResponderExcluir
  8. Cara diria que você tem autoridade pra personalização de blog no Blogger/Blogspot.
    Esse é um dos mais bem customizados blog (Blogger) que eu conheço.

    ResponderExcluir
  9. vc tambem não gosta do target=_blank? Tava lendo uma discussão sobre isso no Digital Paper, até opinei (como usuária) ...apesar de não usar nos meus blogs, eu prefiro quando um link abre em uma nova janela...sei lá...

    abraço

    ResponderExcluir
  10. Pôxa Fran, Valeu mesmo velho! Nós fazemos o que podemos ;-)

    Ariane, eu costumava usar bastante, mas consegui me livrar da dependência ;-)

    Mas ainda acho que há casos onde o target=_blank se aplica bem. Se você quiser mostrar uma imagem ampliada para depois comentar a respeito, por exemplo.

    Ultimamente tenho procurado avisar ao leitor entre parênteses quando o link vai abrir em nova janela.

    Esse assunto dá bastante pano pra manga, pois há quem ame, e quem odeie...

    []'s
    Compulsivo

    ResponderExcluir
  11. Mais uma dica show de bola compulsivo! Já instalei lá no blog, valeu!

    ResponderExcluir
  12. Passando so para agradecer valeu ai tio eu consegui colocar brigadão, fuis-me

    ResponderExcluir
  13. Lenon Lives! Valeu pela visita véio.

    Anônima, que legal que conseguisse colocar. Por acaso tenho certa experiência no ato, se você não tivesse conseguido se satisfazer sozinha, poderíamos marcar um encontro presencial para consumar tal fato.

    Também achei muito legal sua atitude de estudar "o esquema do blogger pra não dar zebra futuramente"

    Mas "Tio" é o irmão da sua mãe, você pode me chamar de Sex Machine ;-)

    []'s
    Compulsivo

    ResponderExcluir
  14. Uma coisa, quem não está conseguindo use o widget do www.intensedebate.com (excelente).

    ResponderExcluir
  15. Olá compulsivo ótimo tutorial, mas gostaria de saber se você autoriza que eu use seus icones de comentários ^^
    para evitar futuros problemas caso você nao permita prefiro perguntar
    Ok?

    Abraços.

    ResponderExcluir
  16. @iMalee, eu prefiro que você use ícones próprios, para evtar aquela impressão: "Já vi esse blogue antes...".

    []'s
    Compulsivo

    ResponderExcluir
  17. Interessante. Vou experimentar. Valeu pela dica.

    ResponderExcluir
  18. Putz! Já tentei mil vezes, faço tudo direitinho, checando passo à passo e não consigo...

    ResponderExcluir
  19. Este comentário foi removido pelo autor.

    ResponderExcluir
  20. Darlo, a forcinha que posso oferecer gratuitamente é o próprio post. Mas sabe como é, pagando bem, mal não tem ;-)

    []'s
    Compulsivo

    ResponderExcluir
  21. Eu juro que fiz tudo certo, mas não consegui... ah, e tentei mil vezes antes de escrever o post e desistir :o(

    ResponderExcluir
  22. Compulsivo,

    Eu consegui incluir os ícones, mas continuou aparecendo o ícone do balãozinho verde do template do blogger. Se você puder me informar como retirá-lo eu agradeço desde já. :)

    ResponderExcluir
  23. Eu descobri! No Blogger Template Style Rounders 3, é só retirar do código as linhas a seguir:

    a.comment-link {
    /* IE5.0/Win doesn't apply padding to inline elements,
    so we hide these two declarations from it */
    background/* */:/**/url("http://www.blogblog.com/rounders/icon_comment_$startSide.gif") no-repeat $startSide 45%;
    padding-$startSide:14px;
    }
    html>body a.comment-link {
    /* Respecified, for IE5/Mac's benefit */
    background:url("http://www.blogblog.com/rounders3/icon_comment_$startSide.gif") no-repeat $startSide 45%;
    padding-$startSide:14px;
    }

    ResponderExcluir
  24. Tentei várias vezes, mas não funcionou... Coloquei o endereço da imagem (que está no imageshack.us, no formato .png), tudo certinho. O que pode ter acontecido? Help!!!!

    ResponderExcluir
  25. E Como é esse Sistema de comentarios do Seu Blog?????????

    ResponderExcluir
  26. No meu não funcionou ainda,tentei e nada!!!

    ResponderExcluir

Postar um comentário

Postagens mais visitadas deste blog

Nomes de todas as igrejas do Brasil

O que significa DVDRip, DVDScr, R5, etc?

Remover idiomas em arquivos Dual Audio