Como colocar emoticons nos comentários

Postado em: 10 de set. de 2011
Postado Por: dffdf

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/AVvXsEiM9AkpuVDhXLGwKQfvWhsMxZc5GyYlUYGRx1wp5RBfzjaSfWa-a8Tnw2IdZpF5SFwfYICvS6xrQ7KXb9LOy41ODRpWrWvOZpcarvf1K9kvUmsWTbAg6xrFKxMrPX9sHGFLMHf_-gZ-58c/s800/emoticon-0100-smile.gif'/> :a

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8fr70EFCTSj3IpYuKAjrFa0i1Nyd0K269vuMgCHXhjmYOAPH7uWnQjxmmjHbH5ZaNTwcmw6mRSgZNB34trFDmkvE3KTX8jOD13zpbGemIhHFoo4pSNymiSQVmuIHDNjrngVTJ09m3j3Y/s800/emoticon-0101-sadsmile.gif'/> :b

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

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

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

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

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

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAqsUNzDWrzHqbUt6rw8ejpowVoW0u4Kb-5cOU3W7HUhoA4DWCWeIfuQencJNdopmogrxBCRJBZjFFORWeLrFSNr3-3UlO5iGSVwEmg6bPqy6OxAG4gwm63zrzwfX8YZWhcNPIO2qw-X4/s800/emoticon-0111-blush.gif'/> :h

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

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

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

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFz7i1rouBSjU_zFQmZp5aNvBZ6nnd1-9FEYfk1GbbQLscKe27RreMh46ImHDSL3OSj2HR-ziPPF62fnIxAsH_6WR4P_chI_ncM6_XlDpoVp32tNkFLkQxx0-Cda3hnbor-2GEaYoGPpI/s800/emoticon-0130-devil.gif'/> :l

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

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

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9lT-uKCor45hkD2X4UT0TsWf_eC24uHCOmIf29err8nJ1uHExS30DHnqIhvEQdYcXUJ_v7QZ-xXbsvsSwxch72VyiKlA-RHcG3ONdmu-Z2uDvDjRJIYRTc_eeEDGGhWYG1qhW_xU0iBg/s800/emoticon-0136-giggle.gif'/> :o

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTFwjDHOv6T4fsMTZd_MpffM_9wO9t2DWdXsowAQlK1JhmXD2f2jU5_kRnAsG1_4gchN6-bZX8_TRQx6YL1gu_Isz5sAogzgGxG9LuY1ewqKZ98iXjrnkQTRhCfNXV22fMZ8Wif2NNyQo/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/AVvXsEiNZUQYAvGpny1w_f79Dcxrm3UGbbR2Uwx5grqzRF1UM5WE1j7-cC9EzCY0u36TarIoiNHewiNVrLT8mbqcDNq9f0BQAlNn-I5p0GZ13Lk0QWloV1z-svoTfpBNJRG17zeA71QvtJJwCMw/s800/emoticon-0126-nerd.gif' alt='' class='smiley'/>");
_str = _str.replace(/:k/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6VZjj_z0wVPX4H1lKD3nQd-UWg5fpY28fbTJCOSBZB9rvUd69w6w1J54kbQBmjDAVFRY4QkE35Yrp_weV5Rwtb_eu55p4iMbG4rt-TBk4J8P-avZ4B9uBGpyea9XW5YkXO1KrQarM34k/s800/emoticon-0103-cool.gif' alt='' class='smiley'/>");
_str = _str.replace(/:l/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFz7i1rouBSjU_zFQmZp5aNvBZ6nnd1-9FEYfk1GbbQLscKe27RreMh46ImHDSL3OSj2HR-ziPPF62fnIxAsH_6WR4P_chI_ncM6_XlDpoVp32tNkFLkQxx0-Cda3hnbor-2GEaYoGPpI/s800/emoticon-0130-devil.gif' alt='' class='smiley'/>");
_str = _str.replace(/:m/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirmtVLwyoBY8D0_xVuPbwKgK6VVt7R0ZERB2_zH-DxdfG-BSSZourCqAd3p9U-ktdeFEHMYmP6nZeJi6KYWMwmQIvjo9jbpSWY9YLlltWhdn1rpCA7_xWJ_4qjWzDbiUrpb27T0TVqC7w/s800/emoticon-0133-wait.gif' alt='' class='smiley'/>");
_str = _str.replace(/:n/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYThVTxOVE2TGzb4_qFVCoGR4janY_d6XjzSjQe-F103nGOtkUNK-DpwLvXS6KK1YWN6FJHgCFFiLsUFGLwajZnI2SjvU1S14AmWQKVvedeJgqp9wqPpd72TPhBXw0rQTyqruhLPLodLQ/s800/emoticon-0137-clapping.gif' alt='' class='smiley'/>");
_str = _str.replace(/:o/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9lT-uKCor45hkD2X4UT0TsWf_eC24uHCOmIf29err8nJ1uHExS30DHnqIhvEQdYcXUJ_v7QZ-xXbsvsSwxch72VyiKlA-RHcG3ONdmu-Z2uDvDjRJIYRTc_eeEDGGhWYG1qhW_xU0iBg/s800/emoticon-0136-giggle.gif' alt='' class='smiley'/>");
_str = _str.replace(/:p/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTFwjDHOv6T4fsMTZd_MpffM_9wO9t2DWdXsowAQlK1JhmXD2f2jU5_kRnAsG1_4gchN6-bZX8_TRQx6YL1gu_Isz5sAogzgGxG9LuY1ewqKZ98iXjrnkQTRhCfNXV22fMZ8Wif2NNyQo/s800/emoticon-0141-whew.gif' alt='' class='smiley'/>");
_str = _str.replace(/:a/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM9AkpuVDhXLGwKQfvWhsMxZc5GyYlUYGRx1wp5RBfzjaSfWa-a8Tnw2IdZpF5SFwfYICvS6xrQ7KXb9LOy41ODRpWrWvOZpcarvf1K9kvUmsWTbAg6xrFKxMrPX9sHGFLMHf_-gZ-58c/s800/emoticon-0100-smile.gif' alt='' class='smiley'/>");
_str = _str.replace(/:b/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8fr70EFCTSj3IpYuKAjrFa0i1Nyd0K269vuMgCHXhjmYOAPH7uWnQjxmmjHbH5ZaNTwcmw6mRSgZNB34trFDmkvE3KTX8jOD13zpbGemIhHFoo4pSNymiSQVmuIHDNjrngVTJ09m3j3Y/s800/emoticon-0101-sadsmile.gif' alt='' class='smiley'/>");
_str = _str.replace(/:c/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC0OWvxyR4Kl5alAJIb2pZ7XuaooyEZ2AswlowYvnDm2dRC8a-WdlsXce3LIuQ0ErVAG_cjxArVI68S77GcE06H_i3I_PzFOeauCK_aFnpCiLWJlXEHD-TabWGe9yt3fc293ZhWrWmZrM/s800/emoticon-0102-bigsmile.gif' alt='' class='smiley'/>");
_str = _str.replace(/:d/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRIQ7tf44SKVAHDNrEPCWme7i16WybtVJ6JnrVh3tdED-EbzEMnYp7mDv34A0lTF4I2AwsCc_pbzVtuL3t_fn7ep5kl-Qz2qpV8bAIqx1eCawVNgzD0HMGSzGbYBgI2_6Nq2MqLYt2Tzc/s800/emoticon-0105-wink.gif' alt='' class='smiley'/>");
_str = _str.replace(/:e/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4iZQTmFQp2NYAhriwqvPNA74a6yTLRQzAsl89PTRUWPsnSOny92otvoQdC7bT784ihtDYetm9y-EpQiTIm9vRAJ1H5pq491haGudWzmkAI2mnopnLvCFQpKtRJohYCysBRWlT0YdQ7xI/s800/emoticon-0104-surprised.gif' alt='' class='smiley'/>");
_str = _str.replace(/:f/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwoRoLS43gJo_aT0nGByRNtN87hE6vmwAShniETFDJnr1uWcWFcUtdJk_xRXBx9alm31PPPgVWGtBymvkVzxGVPA5QFkETYlctZDlVXtxldnHYkQQLoyWVBM6Ws1kQj_dZrTnuRln-OTU/s800/emoticon-0106-crying.gif' alt='' class='smiley'/>");
_str = _str.replace(/:g/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT0Y8xrKWHMeMPvGpo76RhMUGxKYmTSeVCGpUa60ttaukQj3hG9XU1xZhhgY5u_H5Lhe6QzslkKmyZVkuj1Sv_FaqQSxaM4sIaGjh-zG8BOvsvs2XMOMwJklSF5y3CsKLytFEuYjrNOtw/s800/emoticon-0109-kiss.gif' alt='' class='smiley'/>");
_str = _str.replace(/:h/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAqsUNzDWrzHqbUt6rw8ejpowVoW0u4Kb-5cOU3W7HUhoA4DWCWeIfuQencJNdopmogrxBCRJBZjFFORWeLrFSNr3-3UlO5iGSVwEmg6bPqy6OxAG4gwm63zrzwfX8YZWhcNPIO2qw-X4/s800/emoticon-0111-blush.gif' alt='' class='smiley'/>");
_str = _str.replace(/:i/ig,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPOmEqOadeEpBZLftWRObv420M44o5cyjlJv3rK00yBpeWWWuu5mPwUxC_4Dm3D_Jyuyyo3gef6TqdvVhpViVtFglPOSDvLjH_gS2skXRWb-ttC9z3eEjmUT5_boKpwDGTcZwDMhg9B10/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".

Deixe seu Comentário:
Sem comentários »
Categorias:

0 comentários:

Postar um comentário