Como coloca emoticons nos comentarios

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.

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

1. Vá na aba "layout", 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/AVvXsEjECWugHerOsAejq6nKyty-7uKMEUYYpKwBRLeT4v6_shAsBoJA9ITH9BlVFZsz-Kd7BxmVk5s-fDB8wG989Bj3nF_xVztH-UKM-G65O0pmPk7eDL85LnbcdAwiCYjb8srq3luwer4-b_4/s800/emoticon-0100-smile.gif'/> :a

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQcZg5sB4d2I-lNzmguxVrRbM4luRKMGS2xBtVWlhLKdAEw5IGXR1WzStEqtc19TQQUA-N9j-7qjzBR7GLj9sEWPymT3yUTgPXggVcWX6r8KPwH4RBozDu6N0nSuLvqQFj1CU4-802oD0/s800/emoticon-0101-sadsmile.gif'/> :b

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

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

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0LYCQbSGjzFWlpJvdKdqQllmVAom2SBJKHUaNK-5roM7Oi6pMP7wVoXlYlIFqqo25Fnt-S4sHrXVjTDdLSAx-Xma50DTEcrm7ZUZi7nDvTlJNFfQHTbNOd9PITZ2Npff1UDbn0_q4BVc/s800/emoticon-0104-surprised.gif'/> :e

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

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

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

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3qGCxOTO07qy5Qbb29ZW9CU_ILZthWGIveaSq04ay0A_LoLVId8kJed1RZ1YSzbo-irojtxq-eDs0tlgyGQ4VOJpy0hP-gAKXepSGJP5O1vMnaZ9xE46H5EGbC8Uj153WcpCW8Gwk_C8/s800/emoticon-0110-tongueout.gif'/> :i

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

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcAAbcXbv24h27O7RioEDot1tC9k_6TQxgEEwRZSN7T-ZTV7htmJi7xb-2KanJpNQenq4S8yD6u_aTNi4ciHYbiNyro-Ynyh0K_9sbNTFXwVlYDszPqqeImkx71q1jbjG4hwOqrVOe-ks/s800/emoticon-0103-cool.gif'/> :k

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

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

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

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

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifQCT5HWctCZ0rnvH5N1No_aGd7PZDUWyWuNMAWqohy0gCqqRwgTZbWvcVHXV4FYryDyBUz794rmzpGnfWPk0ybpFw6tnkJonrTgWehOuok5-M1aejzBcnvck8YMHmOz_9YWdoK0pvcf8/s800/emoticon-0141-whew.gif'/> :p
</div>

Salve as modificações.
  

Incluir o script que permitirá o uso dos emoticons nos comentários do Blog.
2. Volte na aba "layout" >> "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/AVvXsEgpAYntzBs1q-j_sfG1xNO3HL8g_GMwRpuO38sbITX38venI8xGgVpXKNHIX0O8G56SoWjpD2GLkU9978OluxPqNlNs7GO1SSKHSk8j8QeO8ZdF4pm7SKo1tcmI-lcU6pySevqMDIhMbho/s800/emoticon-0126-nerd.gif' alt='' class='smiley'/>");
_str = _str.replace(/:k/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcAAbcXbv24h27O7RioEDot1tC9k_6TQxgEEwRZSN7T-ZTV7htmJi7xb-2KanJpNQenq4S8yD6u_aTNi4ciHYbiNyro-Ynyh0K_9sbNTFXwVlYDszPqqeImkx71q1jbjG4hwOqrVOe-ks/s800/emoticon-0103-cool.gif' alt='' class='smiley'/>");
_str = _str.replace(/:l/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlJKBRLIqxmc85ZvcfOSrRSiocEyiS1e3d0jQCE8asgZdEMoNVUMEhKbd3KNDEfe5CmNwSGEXBy22c071lS32mMi2gD-cXgYRtHgfpRRepVeHVnNYC9zKoIlLD_omDfSnvTeQz3tDTDZw/s800/emoticon-0130-devil.gif' alt='' class='smiley'/>");
_str = _str.replace(/:m/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMXj7dccK8rH33eEb8_LBDYj9VEuya1hgQyYWAWicpt2iUXoaWMU9Tk63R_lMgO9oxbP02q5vc9K1s7EPc9sRHlmf51EftoZZVGgPvDQbrsunrDQkG0HJCtjrHde5YqFkM2f6jSXNrp4U/s800/emoticon-0133-wait.gif' alt='' class='smiley'/>");
_str = _str.replace(/:n/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgSNVuuTqER_neSfjXpUTIuz1sYa1X4K71UCE7yrfHusGwpu4hgYfg8Ekg6Qyd_1JmyyaZpFz99C5C-VoNCwtnPBIXgeatZ0rC7ATtnKZlmbaua_vBD_pKvV_naVjsqyZlG4DQXHjrkd0/s800/emoticon-0137-clapping.gif' alt='' class='smiley'/>");
_str = _str.replace(/:o/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJPHrPccq8-6PxPFIXHCce65sF2rCVhADkZDat7pXzX5kAqKrXuD_RMBLrG6lH7TlMPxiEZIuDL7Vb8sLCkxK4rVgN0uRVgUE0jMSoxL3SeRzn9mJyssX_caSVUwbanfVfGuvrderytZg/s800/emoticon-0136-giggle.gif' alt='' class='smiley'/>");
_str = _str.replace(/:p/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifQCT5HWctCZ0rnvH5N1No_aGd7PZDUWyWuNMAWqohy0gCqqRwgTZbWvcVHXV4FYryDyBUz794rmzpGnfWPk0ybpFw6tnkJonrTgWehOuok5-M1aejzBcnvck8YMHmOz_9YWdoK0pvcf8/s800/emoticon-0141-whew.gif' alt='' class='smiley'/>");
_str = _str.replace(/:a/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjECWugHerOsAejq6nKyty-7uKMEUYYpKwBRLeT4v6_shAsBoJA9ITH9BlVFZsz-Kd7BxmVk5s-fDB8wG989Bj3nF_xVztH-UKM-G65O0pmPk7eDL85LnbcdAwiCYjb8srq3luwer4-b_4/s800/emoticon-0100-smile.gif' alt='' class='smiley'/>");
_str = _str.replace(/:b/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQcZg5sB4d2I-lNzmguxVrRbM4luRKMGS2xBtVWlhLKdAEw5IGXR1WzStEqtc19TQQUA-N9j-7qjzBR7GLj9sEWPymT3yUTgPXggVcWX6r8KPwH4RBozDu6N0nSuLvqQFj1CU4-802oD0/s800/emoticon-0101-sadsmile.gif' alt='' class='smiley'/>");
_str = _str.replace(/:c/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3rYdVVSXtRx0O9icV1OktNZGECdZre6XHnJwc-NOAV1nyuBNXHMyYASLP573o74VUnd0XxvzUsZjPrtMlhcdF8Lkd6kfoVWfc7KOzYYnrC2nEm8fmmUDCwO-KLqW8NDjcOqV_TspafuI/s800/emoticon-0102-bigsmile.gif' alt='' class='smiley'/>");
_str = _str.replace(/:d/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbgj0Rb-E3e5Ff5yAAQgPblDKMW2Ccfhzhm8yS4Oo8IjBkkvva2uqjr2J9ZsRFIVQbd8EQcJztc2L6ttLQdSFTie-q4PiqDl7aEqafFZ1qTl9tUrcRA7Lc-yJn9C3UMMhTbaSx9dy2HQc/s800/emoticon-0105-wink.gif' alt='' class='smiley'/>");
_str = _str.replace(/:e/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0LYCQbSGjzFWlpJvdKdqQllmVAom2SBJKHUaNK-5roM7Oi6pMP7wVoXlYlIFqqo25Fnt-S4sHrXVjTDdLSAx-Xma50DTEcrm7ZUZi7nDvTlJNFfQHTbNOd9PITZ2Npff1UDbn0_q4BVc/s800/emoticon-0104-surprised.gif' alt='' class='smiley'/>");
_str = _str.replace(/:f/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgia9LNXLvqfHEO2X7v9WZdR9tK3sqNOZsY1vHvaR2PE_K1zIJRMwg4mN9XyhLMiPts-w03QX2iYOHa-hCk7ZZAsJPHIoOmJsJbpHkKDRlKHQbfINudZ4qB7HHMHsEOM44_SsfNXMqPXEk/s800/emoticon-0106-crying.gif' alt='' class='smiley'/>");
_str = _str.replace(/:g/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaiEWzYfYN_ubvS_kJWayd1wvHXsMdFrmxLUcGAhaZh5pfIfchpOsRiwQ77XHqmepWwq3UptGfSp-Yb1dXGOImLkCyIHLeE8yE7T4EDlZSXi3giD5jnFXmiS17l53vQxDbZ18N8YFFxd0/s800/emoticon-0109-kiss.gif' alt='' class='smiley'/>");
_str = _str.replace(/:h/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiVZjmMAbBqRKp5yo2ffAGZvsB9PXT-TKWv7gew8K0fiAkwL5iGw07JxDSaESMS9QG70aWK9jVC4ObNompDFjWUsqMsrd1ZgeLTy5ohICJgUjJHC_ClgfHVmC9pAfJSL06Qb5YMxtw4zM/s800/emoticon-0111-blush.gif' alt='' class='smiley'/>");
_str = _str.replace(/:i/ig,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3qGCxOTO07qy5Qbb29ZW9CU_ILZthWGIveaSq04ay0A_LoLVId8kJed1RZ1YSzbo-irojtxq-eDs0tlgyGQ4VOJpy0hP-gAKXepSGJP5O1vMnaZ9xE46H5EGbC8Uj153WcpCW8Gwk_C8/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*/ 

 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".

Gostou? Comente e Vire Um Seguidor!!