Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1503007350
Vida do cache: 1503050550
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Tutoriais Blogger

Emoticons nos Comentários do Blogger

[alerta]ATENÇÃO:
O sistema de comentários do Blogger mudou!
Acesse o artigo atualizado e veja como proceder para Incluir emoticons animados nos novos comentários do Blogger.

[/alerta]

Navegando pela web, encontrei uma dica no My Blogger Tricks, que ensina a adicionar emoticons animados do Skype no formulário de comentários do Blogger.
Este hack é bem fácil de instalar e com ele você dá um visual diferente aos comentários no seu blog.


DEMO

1º passo:

Incluir imagem com emoticons e símbolos sobre o formulário de comentários para que os visitantes saibam como usar cada emoticon.

1. Vá no menu “modelo”, entre na edição HTML do seu template, clique em “expandir modelos de widgets” e localize a seguinte linha:


<p><data:blogCommentMessage/></p>

e cole o seguinte código logo ABAIXO dela:


<div style=' width: 370px; text-align: left; border: 2px solid #0084ce; background: #FEF9EA; padding: 10px; color:#0084ce; font-weight:bold; '>
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7jnvQpuI/AAAAAAAAC8s/kgswZH3dAng/s800/emoticon-0100-smile.gif'/> :a

&#160;
<img border='0' src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z7j2K2ixI/AAAAAAAAC8w/aBjS3JiC9fA/s800/emoticon-0101-sadsmile.gif'/> :b

&#160;
<img border='0' src='http://lh4.ggpht.com/_7wsQzULWIwo/S6z7kDXfZsI/AAAAAAAAC80/JrDuueBH-mE/s800/emoticon-0102-bigsmile.gif'/> :c

&#160;
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7kQ8V_nI/AAAAAAAAC84/9WEQPmHLJiI/s800/emoticon-0105-wink.gif'/> :d

&#160;
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7kWgRFeI/AAAAAAAAC88/2jjlfg01MIA/s800/emoticon-0104-surprised.gif'/> :e

&#160;
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FBbw3UI/AAAAAAAAC9A/8iSol6bUSDk/s800/emoticon-0106-crying.gif'/> :f

&#160;
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FdrL9dI/AAAAAAAAC9E/rbB37xy1Ybw/s800/emoticon-0109-kiss.gif'/> :g

&#160;
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z8FpL8dkI/AAAAAAAAC9I/p_OhzAyH-SQ/s800/emoticon-0111-blush.gif'/> :h

&#160;
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FmT-INI/AAAAAAAAC9M/GOURDHmPe9E/s800/emoticon-0110-tongueout.gif'/> :i

&#160;
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8Fw5N1LI/AAAAAAAAC9Q/xY9rjSFroCY/s800/emoticon-0126-nerd.gif'/> :j

&#160;
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z9DendQuI/AAAAAAAAC9U/jtRdRpcopRQ/s800/emoticon-0103-cool.gif'/> :k

&#160;
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z9DcebxfI/AAAAAAAAC9Y/Xew2m0j1B9I/s800/emoticon-0130-devil.gif'/> :l

&#160;
<img border='0' src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z9DpaPbrI/AAAAAAAAC9c/M74FsmQxqrw/s800/emoticon-0133-wait.gif'/> :m

&#160;
<img border='0' src='http://lh4.ggpht.com/_7wsQzULWIwo/S6z9D-KY1cI/AAAAAAAAC9g/PZppx2BcToc/s800/emoticon-0137-clapping.gif'/> :n

&#160;
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z9D6YdKmI/AAAAAAAAC9k/io_WlgJQL2w/s800/emoticon-0136-giggle.gif'/> :o

&#160;
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z99cfdl1I/AAAAAAAAC9o/aJP10AXzhGE/s800/emoticon-0141-whew.gif'/> :p
</div>

Salve as modificações.

2º Passo:

Incluir o script que permitirá o uso dos emoticons nos comentários do Blog.
2. Volte no menu “modelo” >> “editar HTML”, não precisa clicar em “expandir modelos de widgets”, copie o código abaixo e cole-o antes de </body>


<script type='text/javascript'>
//<![CDATA[
a = document.getElementById('comments');
if(a) {
b = a.getElementsByTagName("DD");
for(i=0; i < b.length; i++) {
if (b.item(i).getAttribute('CLASS') == 'Author-comment-body' , 'comment-body') {
_str = b.item(i).innerHTML.replace(/:j/gi, "<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8Fw5N1LI/AAAAAAAAC9Q/xY9rjSFroCY/s800/emoticon-0126-nerd.gif' alt='' class='smiley'/>");
_str = _str.replace(/:k/gi, "<img src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z9DendQuI/AAAAAAAAC9U/jtRdRpcopRQ/s800/emoticon-0103-cool.gif' alt='' class='smiley'/>");
_str = _str.replace(/:l/gi, "<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z9DcebxfI/AAAAAAAAC9Y/Xew2m0j1B9I/s800/emoticon-0130-devil.gif' alt='' class='smiley'/>");
_str = _str.replace(/:m/gi, "<img src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z9DpaPbrI/AAAAAAAAC9c/M74FsmQxqrw/s800/emoticon-0133-wait.gif' alt='' class='smiley'/>");
_str = _str.replace(/:n/gi, "<img src='http://lh4.ggpht.com/_7wsQzULWIwo/S6z9D-KY1cI/AAAAAAAAC9g/PZppx2BcToc/s800/emoticon-0137-clapping.gif' alt='' class='smiley'/>");
_str = _str.replace(/:o/gi, "<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z9D6YdKmI/AAAAAAAAC9k/io_WlgJQL2w/s800/emoticon-0136-giggle.gif' alt='' class='smiley'/>");
_str = _str.replace(/:p/gi, "<img src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z99cfdl1I/AAAAAAAAC9o/aJP10AXzhGE/s800/emoticon-0141-whew.gif' alt='' class='smiley'/>");
_str = _str.replace(/:a/gi, "<img src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7jnvQpuI/AAAAAAAAC8s/kgswZH3dAng/s800/emoticon-0100-smile.gif' alt='' class='smiley'/>");
_str = _str.replace(/:b/gi, "<img src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z7j2K2ixI/AAAAAAAAC8w/aBjS3JiC9fA/s800/emoticon-0101-sadsmile.gif' alt='' class='smiley'/>");
_str = _str.replace(/:c/gi, "<img src='http://lh4.ggpht.com/_7wsQzULWIwo/S6z7kDXfZsI/AAAAAAAAC80/JrDuueBH-mE/s800/emoticon-0102-bigsmile.gif' alt='' class='smiley'/>");
_str = _str.replace(/:d/gi, "<img src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7kQ8V_nI/AAAAAAAAC84/9WEQPmHLJiI/s800/emoticon-0105-wink.gif' alt='' class='smiley'/>");
_str = _str.replace(/:e/gi, "<img src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7kWgRFeI/AAAAAAAAC88/2jjlfg01MIA/s800/emoticon-0104-surprised.gif' alt='' class='smiley'/>");
_str = _str.replace(/:f/gi, "<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FBbw3UI/AAAAAAAAC9A/8iSol6bUSDk/s800/emoticon-0106-crying.gif' alt='' class='smiley'/>");
_str = _str.replace(/:g/gi, "<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FdrL9dI/AAAAAAAAC9E/rbB37xy1Ybw/s800/emoticon-0109-kiss.gif' alt='' class='smiley'/>");
_str = _str.replace(/:h/gi, "<img src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z8FpL8dkI/AAAAAAAAC9I/p_OhzAyH-SQ/s800/emoticon-0111-blush.gif' alt='' class='smiley'/>");
_str = _str.replace(/:i/ig,"<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FmT-INI/AAAAAAAAC9M/GOURDHmPe9E/s800/emoticon-0110-tongueout.gif' alt='' class='smiley'/>")
b.item(i).innerHTML = _str;
}
}
}

//]]>

</script>

Nota: Você também pode tentar adicionar o código javascript logo acima de </head>

Salve!

Se você preferir, você poderá alterar o layout onde ficam os emoticons (acima do formulário), para personalizá-lo de acordo com as cores do seu template,editando cores de borda, fonte, background etc.
Procure pela linha do código:


<div style=' width: 370px; text-align: left; border: 2px solid #0084ce; background: #FEF9EA; padding: 10px; color:#0084ce; font-weight:bold; '>

Veja os campos que você pode editar e personalizar de acordo com sua preferência:


width: 370px --/*largura total*/
border: 2px solid # 0084ce --/*borda*/
background: # FEF9EA --/*cor de fundo*/
cor: # 0084ce; --/*cor do texto dos simbolos*/

[dica]Importante:
este hack só irá funcionar em formulários incorporados abaixo das postagens, se você utiliza o metodo de “pop up” não vai funcionar.
Caso queira ativar: entre em “configurações” >> “comentários” >> escolha a opção: “postagem abaixo incorporada“.[/dica]



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

37 Comentários

  1. Lucas disse:

    no meu template não encontra nem um
    o q faço???

  2. Pois disse:

    No meu também não dá, quando comento só aparece :a em vez do smile

  3. proPHano disse:

    Ah, da um quê a mais nos comentários, mas é muito bobo.

  4. Otanyan disse:

    Ah esqueçe! Eu já notei meu erro! Obrigada beijos!

  5. Otanyan disse:

    mas estou com um problema a caixinha tá lá com os emoticons mas quando digita o código, não apareçe o emoticon nos comentários e agora?

  6. Otanyan disse:

    Funcionou bonitinho, obrigada! ^^

  7. Ju disse:

    não consegui fazer os emoticons não apareceram

  8. WMaster disse:

    bem, só dando uma passada para revisar a minha dica,
    Onde está dizendo : *** p/p *** é na verdade

    p data:blogCommentMessage p

    só você acrescentar os "< >" no código

    e na outra parte do comentário que foi cortado a linha de comando, foi onde diz o seguinte:

    Procure essa: e não apareceu =/

    bem, está aqui a linha de comando:

    b:if cond='data:post.embedCommentForm'

    só você acrescentar os "< >" no código para funcionar no seu blog

    P.s 1: essa linha de comando acima é mais usadas em novos templates do blogger

    Espero que dessa vez apareça o comentário por completo =)
    valeu a todos, fiquem com Deus o/

  9. FACES DA MORTE disse:

    clau, a caixinha de emoticons nao apareceu em meu blog o que fazer? ja que voce nao fornece ajuda, o webmaster tentou explicar ai mais nao deu para ver que linha que ele falou da uma ajuda ai

  10. Rui Sanches disse:

    Infelizmente, não funciona no meu template, apesar de ficar tudo bonitinho. Tks na mesma

  11. WMaster disse:

    Olá Clau!
    Como já é de praxê mais um bom artigo publicado por você ;D
    Bem, eu uso os emoticons do Yahoo, mas agora depois de ver esse Artigo vou usar os do Skype xD
    ————————————-
    Queria deixar uma dica ^^'
    Para aqueles que estão seguindo esse tutorial e a caixinha com os emoticons não apareceu no seu blog =/ com certeza é o seu modelo de template ¬¬' Mais e ai, como resolvo?
    bem, se em seu template não tiver a linha :

    *** p/p ***

    Ou se mesmo tiver essa linha e a caixinha ainda não está aparecendo, tem outra Opção =Dsegue logo abaixo.

    Procure essa:

    E dê continuidade na leitura do artigo dessa mesma página publicado pela Clau.
    essas duas linhas de código são as mais comuns em diversos templates ^^'
    Pronto, parei… era essa a dica o/
    Muito Obrigado Clau, por esse excelente trabalho que você desempenha com MundoBlogger!
    Abraço a todos, fiquem com Deus.

    P.s: não esqueça de colocar o "< >" não coloquei devido a tag: "Script" não ser permitida aqui nos comentários.

  12. .:: Clau ::. disse:

    Amanda
    Como você pode verificar , isso não aconteceu no blog onde fiz o teste, inclusive varios leitores vão lá testar. Tais recursos variam de template para template. Sendo assim, não tenho como te ajudar.

  13. Amanda Oliveira disse:

    Olá Clau, gostaria de saber se você pode me ajudar, segui os passos corretamente, aparece a caixinha com os emoticons só que quando a pessoa comenta os emoticons não aparecem no comentário, só o que aparece são seus atalhos tipo: ":a" , ":b"…

    O que fiz de errado? =/

  14. Matheussm disse:

    Num pegou no meo blogger naum

  15. eRike sOuza disse:

    ótimo, valw linda ficou muito legal olha ai no meu site http://www.downbrazukas.com vs é muiito gata viu

  16. adiministrador do site disse:

    ola,sim tudo bem clau isso eu sie fazer,eu estou dizendo que tipo,não aparece a categoria no post,exemplo: eu publico um arquivo e tudo mais ai coloco a categoria certa,so que la,na pagina principal,não aparece o nome da categoria,tem como você me ajuda nisso? aguardo resposta….

  17. .:: Clau ::. disse:

    adiministrador do site
    Dá uma lida no tutorial:
    "Inserir marcador em posts já publicados"
    talvez te ajude.

  18. adiministrador do site disse:

    ola,eu tenho um problema,e não sei se esse é o post certo para publicar,mas quem sabe voce me ajude,é o seguinte,eu tenho um site e tudo mais http://www.needmundovista.blogspot.com e tipo,nos posts,não aparecem as categorias,eu ja fiz de tudo,de TUDO mesmo,e queria saber se você pode me ajudar com esse problema,desde já agradeço pela compreensão.abraços e aguardo resposta, se possivel teria como você mandar pelo meu e-mail?
    jhoniad@hotmail.com

  19. vegas disse:

    linda maravilhosa, estou personalizando meu blog graças a seus titoriais, o melhor blog da net neste aspecto, muito obrigado por sua ajuda.

  20. ::Clau:: disse:

    Eduardo Montanari
    certifique-se q vc inseriu os endereços das imagens corretamente. Eu aconselho que vc salve cada emoticom e hospede no seu site de sua preferencia, e altere os endereços das imagens. As vezes as imagens podem sair do ar mesmo qdo ocorre de ultrapasar a banda do servidor q as hospeda, muita gente usando o mesmo servidor as vezes dá nisso tb.

  21. Eduardo Montanari disse:

    Fiz tudo certinho, mas no meu não aparece nada. Só as letras.

  22. ::Clau:: disse:

    @?? Mel ? mendes? ? ?:
    Não faço ideia do pq no seu ficou assim. Pode ser algo relacionado ao seu template. Não tenho como ajudar.

  23. ?? Mel ? mendes? ? ? disse:

    Oi,Clau. Os emoticons não aparecem um ao lado do outro,mas sim um em cima do outro,visualmente não ficou muito legal…Por que será que isso aconteceu? Tentei fazer tudo tão direitinho…Tem como corrigir? Obrigado!

  24. Tadeu Ribeiro (Administrador) disse:

    Adorei a dica! Já estou usando. Wlw.

  25. .:: Clau ::. disse:

    @Rafael, @Psicologia em Foco :
    Obrigada pelo comentário e pela visita. Volte, sempre!

    @Clube da risada:
    No IE8 funciona sim. =)

  26. Clube da risada disse:

    Mas este hack funciona em todos navegadores? Já vi alguns hacks q não funcionam no IE8 esse funciona? Abs!

  27. Psicologia em Foco disse:

    Obrigada, querida!
    Já tentei tantos scripts para pôr emoticosn nos comentários, mas nada funcionava! Só o seu deu certo…

    Bjiin

  28. Rafael disse:

    muito boa essa dica, coloquei no meu blog e ficou otimo 😉

  29. ::Clau:: disse:

    @' DeeJaay iFilezinho:
    Olha o do passo 1 eu acho que não..mas o do passo 2, acredito que funcione sim. Não custa nada tentar né?

  30. ' Gleison- disse:

    se eu pegr os códigos dos passos 1 e 2 e colocar como arquivo1.js e arquivo2.js (ex.)e hospedar, no blog vai funcionar?

  31. The Wolf - www.PiratasVirtuais.com disse:

    Perfeito

  32. ::Clau:: disse:

    Janaina Barreto:
    Esse emoticon q uso no post não é script…eu simplesmente coloco uma imagem no post mesmo…é feito manualmente..não é script não…
    Agora sobre os seus script no seu blog, conforme vc citou, eu recomendo que leia este artigo:
    Por que alguns scripts não funcionam no meu blog.
    Irá te ajudar a entender melhor sobre o funcionamento dos script no template.
    Obrigada pela visita e volte sempre!

  33. Janaina Barreto disse:

    Olá! Sou eu de novo…
    Bom, é que queria saber que script você usa pra pôr emoticons nos seus posts pois eu vi em alguns. Estou com um probleminha nos script que uso no meu, sempre que aponto o blog para o dominio no UOL Host, eles só aparecem se eu estiver logada, vê se pode?!
    Se você puder responder… De qualquer forma, volto pra dar uma olhada.
    Obrigada :)

  34. Andressa Quadro disse:

    Ótima dica Clau!
    Já tinha um tempo que eu estava procurando uma maneira de colocar emoticons nos coments do meu blog, vou tentar depois.
    Parabéns pelo seu site, sempre passo por aqui e encontro dicas ótimas que ajudam a melhorar cada vez mais o template e a usabilidade do meu blog =D
    Que Deus te abençoe hoje e sempre
    abraços

  35. ::Clau:: disse:

    @$il@a$!:
    sim tem e é facilimo de instalar. =)

  36. $il@a$! disse:

    Tem Emoticons animados?

  37. Cláudia Charão disse:

    ah que legal, adoro emoticons, vou tentar depois.

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.