Como Colocar Emoticons nos comentários do blog
Autor: Renan• | Publicado: 2012-03-24T15:31:00-07:00

Vamos mostrar como adicionar emoticos parecidos ao do MSN nos  comentários do blogspot, mas para usar isso é necessário usar os  comentários incorporados as postagens, ou seja, na mesma pagina das  postagens. Para ativar isso entre em configurações &gt; comentários,  procure por Posição do formulário de comentários e escolha a opção:  Postagem abaixo incorporada.


Veja aqui como ficou o resultado final desse código para colocar emoticons nos comentários do blog:
Na hora de postar o comentário

E depois de salvo e publicado


Essas imagens são de nosso blog de teste: Fabrica de Layout

Mas vamos começar a mostrar como colocar emoticos nos comentários do seu blogger, entre na pagina editar html, clique para expandir o modelo e procure por:
data:blogCommentMessage

Provavelmente estará assim:
&lt;h4 id='comment-post-message'&gt;&lt;data:postCommentMsg/&gt;&lt;/h4&gt;

E logo abaixo coloque esse código:

&lt;div  style=' width: 370px; text-align: left; border: 2px solid #0084ce;  background: #FEF9EA; padding: 10px; color:#0084ce; font-weight:bold;  '&gt;
&lt;img border='0'  src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7jnvQpuI/AAAAAAAAC8s/kgswZH3dAng/s800/emoticon-0100-smile.gif'/&gt;  :a
&amp;#160;
&lt;img border='0'  src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z7j2K2ixI/AAAAAAAAC8w/aBjS3JiC9fA/s800/emoticon-0101-sadsmile.gif'/&gt;  :b
&amp;#160;
&lt;img border='0'  src='http://lh4.ggpht.com/_7wsQzULWIwo/S6z7kDXfZsI/AAAAAAAAC80/JrDuueBH-mE/s800/emoticon-0102-bigsmile.gif'/&gt;  :c
&amp;#160;
&lt;img border='0'  src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7kQ8V_nI/AAAAAAAAC84/9WEQPmHLJiI/s800/emoticon-0105-wink.gif'/&gt;  :d
&amp;#160;
&lt;img border='0'  src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7kWgRFeI/AAAAAAAAC88/2jjlfg01MIA/s800/emoticon-0104-surprised.gif'/&gt;  :e
&amp;#160;
&lt;img border='0'  src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FBbw3UI/AAAAAAAAC9A/8iSol6bUSDk/s800/emoticon-0106-crying.gif'/&gt;  :f
&amp;#160;
&lt;img border='0'  src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FdrL9dI/AAAAAAAAC9E/rbB37xy1Ybw/s800/emoticon-0109-kiss.gif'/&gt;  :g
&amp;#160;
&lt;img border='0'  src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z8FpL8dkI/AAAAAAAAC9I/p_OhzAyH-SQ/s800/emoticon-0111-blush.gif'/&gt;  :h
&amp;#160;
&lt;img border='0'  src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FmT-INI/AAAAAAAAC9M/GOURDHmPe9E/s800/emoticon-0110-tongueout.gif'/&gt;  :i
&amp;#160;
&lt;img border='0'  src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8Fw5N1LI/AAAAAAAAC9Q/xY9rjSFroCY/s800/emoticon-0126-nerd.gif'/&gt;  :j
&amp;#160;
&lt;img border='0'  src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z9DendQuI/AAAAAAAAC9U/jtRdRpcopRQ/s800/emoticon-0103-cool.gif'/&gt;  :k
&amp;#160;
&lt;img border='0'  src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z9DcebxfI/AAAAAAAAC9Y/Xew2m0j1B9I/s800/emoticon-0130-devil.gif'/&gt;  :l
&amp;#160;
&lt;img border='0'  src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z9DpaPbrI/AAAAAAAAC9c/M74FsmQxqrw/s800/emoticon-0133-wait.gif'/&gt;  :m
&amp;#160;
&lt;img border='0'  src='http://lh4.ggpht.com/_7wsQzULWIwo/S6z9D-KY1cI/AAAAAAAAC9g/PZppx2BcToc/s800/emoticon-0137-clapping.gif'/&gt;  :n
&amp;#160;
&lt;img border='0'  src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z9D6YdKmI/AAAAAAAAC9k/io_WlgJQL2w/s800/emoticon-0136-giggle.gif'/&gt;  :o
&amp;#160;
&lt;img border='0'  src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z99cfdl1I/AAAAAAAAC9o/aJP10AXzhGE/s800/emoticon-0141-whew.gif'/&gt;  :p
&amp;#160;
&lt;img border='0'  src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z99UcZMKI/AAAAAAAAC9s/p7NVe245uP4/s800/emoticon-0148-yes.gif'/&gt;  :q
&amp;#160;
&lt;img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z99sMaIFI/AAAAAAAAC9w/gIu5t9057us/s800/emoticon-0149-no.gif'/&gt; :r
&amp;#160;
&lt;img  border='0'  src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z9-FFVEeI/AAAAAAAAC94/T1IXnlT43-M/s800/emoticon-0178-rock.gif'/&gt;  :s
&amp;#160;
&lt;img border='0'  src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z99zPt4vI/AAAAAAAAC90/SOCwFsYa4M4/s800/emoticon-0155-flower.gif'/&gt;  :t
&lt;/div&gt;

Clique para salvar, então procure por: &lt;/body&gt; e coloque esse código antes dele:

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

Clique  novamente para salvar e depois é só fazer os testes, lembre-se que os  comentários do blogger podem demorar uns minutos para aparecer,  normalmente não demora, então se não aparecer na hora é normal, mas isso  não quer dizer que deu errado, nos testes que fizemos demorou uns 2  minutos para ser visível o comentário com emoticons no blogger.

E o melhor de tudo sobre esses emoticons para colocar no blog é que você pode criar os seus emoticons facilmente, repare que os trechos que se repetem varias vezes:

_str = _str.replace(/:k/gi, "&lt;img src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z9DendQuI/AAAAAAAAC9U/jtRdRpcopRQ/s800/emoticon-0103-cool.gif' alt='' class='smiley'/&gt;");

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

Cada  um numa parte do código é repetido apenas trocando o endereço da imagem  e o código para o emoticon (estão em destaque), portanto se trocar o  endereço da imagem:  http://lh3.ggpht.com/_7wsQzULWIwo/S6z9DendQuI/AAAAAAAAC9U/jtRdRpcopRQ/s800/emoticon-0103-cool.gif'

E  o código :k irá criar um novo emoticon, apenas tome cuidado para não  apagar nem colocar nada a mais no código e não usar o código de imagem  repetido ou seja :k só poderá haver um deles, então escolha outros  caracteres para ser o atalho para os novos emoticons.