Emoticons nos Comentários do Blogger

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfXFS3W64fxAzCk6bgqBLVVhKsmpZrgI-SUlWQwPrtNEpEMgjkV-z7vNSgBJrylFgoZuV-TfLiGrtJQqXRF2yEVYx9cHiXaQlRBh4-V1Qn4qAbbGU0oxcLMltVre2zz0cCwe6c6GASbuY/s800/emoticon-0100-smile.gif'/> :a

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuzYzduv-IcB5RzLxKLOzgiXeytafhYah86xu99afM6Id3OUFRSbm-k-4SYrnb2Abu4ofTS70a2eELPOhe8TD653rS7lQ2jqjbfA1tuXgQSjOI7PsP-ypBtij8A4iBuIfG0vimB3AX3fs/s800/emoticon-0101-sadsmile.gif'/> :b

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDY6NYPTiat3gA9nS5b0z79rSsy4Fztm8I5wFuz-jbVeWX-mXfDWnRdZXhXEuhgr0YFIIzsc5yJQWacRKfX9rUUQs7br5lNDKhZzQHvIALlKjenRBxUwadjS-inDxivOGNBmumDtUjZ0M/s800/emoticon-0102-bigsmile.gif'/> :c

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4ns3lNSbDsuGqsLV2x2tJFqiZS82ALzch9EQ2cru8vC9xDuqBoXyiAcoaC3z_p_ejJ_D95z5oHjxcnjYOq7YpVJyuwxy91raGZPV5esVPTXH2lgVQeYgCPqqXdmxX2n9WiDWbJA8sxOQ/s800/emoticon-0105-wink.gif'/> :d

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdHUoz6sTvfuLOhFnQ8lK7I1LWUeJJEJPFmC6oOdtQcol2cb3Heb6ispZS1dRRkc3ZXQUmWhCc0lDyFtS7ntdlBlM5ZrI-5Y-cNHNSM-P8WBVSKBEp8HkV3vAwfiNNNgMdojjF_UxnBps/s800/emoticon-0104-surprised.gif'/> :e

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnjUQ1ajdTfzEBKa-zfAzyRE8ee6CVWXpJLeUTsTie8w-vzKPErktrDiqp2umWgl4zzLBHLutqvjiUrWXmQ8ZxsimjzCVbazOA_1dcqtBCJg7AjbObJsBwpEV1o-lkKViRN1cNu3EgpG4/s800/emoticon-0106-crying.gif'/> :f

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv69_AVwmlPf0MtzqEK8JVeUB5FOjkI5r-5_vN1fPKxSfwo5aF7gAwEqzqtE9d6q7p7VeEy8sx3LwsbkeqTlEIfVZG-AFnTr8VLFIAblbVACjKruKTXLgPkkf9nyXOiRXrTqmZd7t7GWI/s800/emoticon-0109-kiss.gif'/> :g

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj55P-oriUowSm9V6KJqjIF9FGNZEcqbvFSApBWSL8QJG70DyXrVFy1JJdboK6wNS-paP7B4bOhSbyOiUyWWo_NqiDXTR1RDJ-y0fFN1NGzrqD5VHUUUeSqAGwIh7kihhgV7f2fJ9ndlmo/s800/emoticon-0111-blush.gif'/> :h

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFM8-VnssabmBdw6CGiZgShBl8KlsmkVjnmRx7ezeMKfjWmfIet-icYlfgSs8SPjRgEGKtbElaxMQ10Uuk6v3TW1SKk-NjUaBDCY34TB6XTyxCSPBgY_Uelp_2RazzR3-ka0fUlQx6Qtc/s800/emoticon-0110-tongueout.gif'/> :i

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMiR65lYP0v_713DuNbq6nYkTF1-sqRaNFXJ-Wzmd8F0U_7APZyYQIIpj4dUH7jlJ_Vn5FFmfDqx8tMBHd8NqzgWeik3Y7txSCdjwpuQ4tT9Zz2AtUy5Z78y2OBasM1HNLsbMIYcftXAE/s800/emoticon-0126-nerd.gif'/> :j

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgavdjoHupj739diWm4BCqbpPuo4Us4kZFAj690KPtlk95FqEtImzAR0OrKlVKZJVXaTLQ3kf350Ij8p6GHgHOeJfEdXg3OV4wwr3WvA0tUKeiMKJPO9p9keEPK-u6fKAn0tMP3VeFoqqY/s800/emoticon-0103-cool.gif'/> :k

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI5r7_tkOGVsrteUOYBII_hLVtwbBgOaCQE3OvdR5fl0exU2Q_pnpJKKaJ7vGUbCz4ClXTpke5OueZYkM0Pf4Qv45KFRTqUJxrG2e5TQVD-mWwlCGWfm-d_q8Kp3dPv5B82jdp2Gc3tsw/s800/emoticon-0130-devil.gif'/> :l

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnpzG3AOVDbrVtVhh8_-FV3rjFHQaSztvemct4gNMkR-vs9DsL1ym_MLpKDeHlq6ppjbqjGe1YNvziPuJH-hxmUAJA1I1OtwJmwp9roMBG05dKUfiOIR2thZ3P4EPNmBVWjchVAkbkyoU/s800/emoticon-0133-wait.gif'/> :m

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig3-U6TEAUt-CT60PBTEmbbma4EJQgDWk0sd_8w4i6uNTmlNvcJ3b2GgiCZ4T4fJ_VPRTwkKb3gUlPEee-oCYMk5aPEURo58M3L9YqoBE1HiJJcr8gcdE7bh9nor1J8sVGNvNVBt6cxFo/s800/emoticon-0137-clapping.gif'/> :n

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNoV4I0MiI_H-0iUaGfXFkyt-t21CdYiD7D2TYmf5CIBOmp6Uxl7ElpLZ3dP6udcNXQIE4qJOxYs3qFY_wTAn4lBHajsGd03AVxqZWN93HZR8qfGI35cqucBsMAdYflB0ldkmwsyqqyxI/s800/emoticon-0136-giggle.gif'/> :o

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV0CZ4hE8BnqWsg8uJtVw-GD5NmyLJFYY6rXwiRp90kTWLfvFOmzB68-1DxMRmaPY0Mzv5tFBrhcCDhTEhHFP6c2cyFNV-FsKYFvC_P3iHcwZwpjt_Z4QwRWlN-lRCt0stKSZOz1Zdz-k/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMiR65lYP0v_713DuNbq6nYkTF1-sqRaNFXJ-Wzmd8F0U_7APZyYQIIpj4dUH7jlJ_Vn5FFmfDqx8tMBHd8NqzgWeik3Y7txSCdjwpuQ4tT9Zz2AtUy5Z78y2OBasM1HNLsbMIYcftXAE/s800/emoticon-0126-nerd.gif' alt='' class='smiley'/>");
_str = _str.replace(/:k/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgavdjoHupj739diWm4BCqbpPuo4Us4kZFAj690KPtlk95FqEtImzAR0OrKlVKZJVXaTLQ3kf350Ij8p6GHgHOeJfEdXg3OV4wwr3WvA0tUKeiMKJPO9p9keEPK-u6fKAn0tMP3VeFoqqY/s800/emoticon-0103-cool.gif' alt='' class='smiley'/>");
_str = _str.replace(/:l/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI5r7_tkOGVsrteUOYBII_hLVtwbBgOaCQE3OvdR5fl0exU2Q_pnpJKKaJ7vGUbCz4ClXTpke5OueZYkM0Pf4Qv45KFRTqUJxrG2e5TQVD-mWwlCGWfm-d_q8Kp3dPv5B82jdp2Gc3tsw/s800/emoticon-0130-devil.gif' alt='' class='smiley'/>");
_str = _str.replace(/:m/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnpzG3AOVDbrVtVhh8_-FV3rjFHQaSztvemct4gNMkR-vs9DsL1ym_MLpKDeHlq6ppjbqjGe1YNvziPuJH-hxmUAJA1I1OtwJmwp9roMBG05dKUfiOIR2thZ3P4EPNmBVWjchVAkbkyoU/s800/emoticon-0133-wait.gif' alt='' class='smiley'/>");
_str = _str.replace(/:n/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig3-U6TEAUt-CT60PBTEmbbma4EJQgDWk0sd_8w4i6uNTmlNvcJ3b2GgiCZ4T4fJ_VPRTwkKb3gUlPEee-oCYMk5aPEURo58M3L9YqoBE1HiJJcr8gcdE7bh9nor1J8sVGNvNVBt6cxFo/s800/emoticon-0137-clapping.gif' alt='' class='smiley'/>");
_str = _str.replace(/:o/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNoV4I0MiI_H-0iUaGfXFkyt-t21CdYiD7D2TYmf5CIBOmp6Uxl7ElpLZ3dP6udcNXQIE4qJOxYs3qFY_wTAn4lBHajsGd03AVxqZWN93HZR8qfGI35cqucBsMAdYflB0ldkmwsyqqyxI/s800/emoticon-0136-giggle.gif' alt='' class='smiley'/>");
_str = _str.replace(/:p/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV0CZ4hE8BnqWsg8uJtVw-GD5NmyLJFYY6rXwiRp90kTWLfvFOmzB68-1DxMRmaPY0Mzv5tFBrhcCDhTEhHFP6c2cyFNV-FsKYFvC_P3iHcwZwpjt_Z4QwRWlN-lRCt0stKSZOz1Zdz-k/s800/emoticon-0141-whew.gif' alt='' class='smiley'/>");
_str = _str.replace(/:a/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfXFS3W64fxAzCk6bgqBLVVhKsmpZrgI-SUlWQwPrtNEpEMgjkV-z7vNSgBJrylFgoZuV-TfLiGrtJQqXRF2yEVYx9cHiXaQlRBh4-V1Qn4qAbbGU0oxcLMltVre2zz0cCwe6c6GASbuY/s800/emoticon-0100-smile.gif' alt='' class='smiley'/>");
_str = _str.replace(/:b/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuzYzduv-IcB5RzLxKLOzgiXeytafhYah86xu99afM6Id3OUFRSbm-k-4SYrnb2Abu4ofTS70a2eELPOhe8TD653rS7lQ2jqjbfA1tuXgQSjOI7PsP-ypBtij8A4iBuIfG0vimB3AX3fs/s800/emoticon-0101-sadsmile.gif' alt='' class='smiley'/>");
_str = _str.replace(/:c/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDY6NYPTiat3gA9nS5b0z79rSsy4Fztm8I5wFuz-jbVeWX-mXfDWnRdZXhXEuhgr0YFIIzsc5yJQWacRKfX9rUUQs7br5lNDKhZzQHvIALlKjenRBxUwadjS-inDxivOGNBmumDtUjZ0M/s800/emoticon-0102-bigsmile.gif' alt='' class='smiley'/>");
_str = _str.replace(/:d/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4ns3lNSbDsuGqsLV2x2tJFqiZS82ALzch9EQ2cru8vC9xDuqBoXyiAcoaC3z_p_ejJ_D95z5oHjxcnjYOq7YpVJyuwxy91raGZPV5esVPTXH2lgVQeYgCPqqXdmxX2n9WiDWbJA8sxOQ/s800/emoticon-0105-wink.gif' alt='' class='smiley'/>");
_str = _str.replace(/:e/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdHUoz6sTvfuLOhFnQ8lK7I1LWUeJJEJPFmC6oOdtQcol2cb3Heb6ispZS1dRRkc3ZXQUmWhCc0lDyFtS7ntdlBlM5ZrI-5Y-cNHNSM-P8WBVSKBEp8HkV3vAwfiNNNgMdojjF_UxnBps/s800/emoticon-0104-surprised.gif' alt='' class='smiley'/>");
_str = _str.replace(/:f/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnjUQ1ajdTfzEBKa-zfAzyRE8ee6CVWXpJLeUTsTie8w-vzKPErktrDiqp2umWgl4zzLBHLutqvjiUrWXmQ8ZxsimjzCVbazOA_1dcqtBCJg7AjbObJsBwpEV1o-lkKViRN1cNu3EgpG4/s800/emoticon-0106-crying.gif' alt='' class='smiley'/>");
_str = _str.replace(/:g/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv69_AVwmlPf0MtzqEK8JVeUB5FOjkI5r-5_vN1fPKxSfwo5aF7gAwEqzqtE9d6q7p7VeEy8sx3LwsbkeqTlEIfVZG-AFnTr8VLFIAblbVACjKruKTXLgPkkf9nyXOiRXrTqmZd7t7GWI/s800/emoticon-0109-kiss.gif' alt='' class='smiley'/>");
_str = _str.replace(/:h/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj55P-oriUowSm9V6KJqjIF9FGNZEcqbvFSApBWSL8QJG70DyXrVFy1JJdboK6wNS-paP7B4bOhSbyOiUyWWo_NqiDXTR1RDJ-y0fFN1NGzrqD5VHUUUeSqAGwIh7kihhgV7f2fJ9ndlmo/s800/emoticon-0111-blush.gif' alt='' class='smiley'/>");
_str = _str.replace(/:i/ig,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFM8-VnssabmBdw6CGiZgShBl8KlsmkVjnmRx7ezeMKfjWmfIet-icYlfgSs8SPjRgEGKtbElaxMQ10Uuk6v3TW1SKk-NjUaBDCY34TB6XTyxCSPBgY_Uelp_2RazzR3-ka0fUlQx6Qtc/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]