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/AVvXsEgvgmN_jg3jvbcKDIBPaXEHmjgROfT_ivTFam1yhupE4VFGhOaMGGGwq_KQWAR_ZV98r35GGIjVq_GV36I7cGZ9W92zn7iqoxsAvBv6MJ8qgjgC4kHnHJLGysDWroFf9GX1W3mLHuEMrkY/s800/emoticon-0100-smile.gif'/> :a



&#160;

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDqnWlITo3s9MxdljmEN616UYigKMjFl7UpRhkrKuKEmEfWV03nBv4eW4otjc-8zw9FrGx_cXE6RiGsqR7kLJL0JHTAe5JZeyUtkcYJbWWkP8J52RpCHbzyDp3cR6GvdV5BbTFwBN6nEQ/s800/emoticon-0101-sadsmile.gif'/> :b



&#160;

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAHr_FVpci5M5yVRyT3Zrx3bnA4_eMCm1nBDSA9WXQcqhs3pWVMl-TefFvJTcDu3mMFDS-r-0wVTZuy20u1PPiN4TrddKr1nm9gnYYcHCUZzET8IJSPBVKjOf8EpTnYf_X2HEvbNj-h_k/s800/emoticon-0102-bigsmile.gif'/> :c



&#160;

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEkfavXJGIsrg64LTkadWfw4m3DJf5bPJqFYk3AYcegZ-mVOSBIn20mYlUSOtlknIigTFSAbNWG1y2jaCpt5oVBuFdz2ccztcWjxYcgQ5DVfAxp4l73LeQWashNvqEw5pwiTUb-MNjJ0I/s800/emoticon-0105-wink.gif'/> :d



&#160;

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBWqLkb5iYY-jvHtaUpm_1sDHaH1pBgN4j3gFf32h4ylwVJXV0wxqcsgREF7JyYsqoEFdNYHR4h0L34S0pD1G3kO62kZcihZmSqFEfYVhbemg5JlI0wtg9WbR0UJvDWnmZZOlepFniuI0/s800/emoticon-0104-surprised.gif'/> :e



&#160;

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiGoZIhBUrwHlqrhCCeJMLJp9y_uTnLSPZFcQCTE_HkFxkYPrIyEiaoGnWlUFU-4zJhOVjKIUykM0MqrfO6mWNY4P_bammlvD8c4KeecDGcIkyJDpDjwqk_9fDw103NdJV1YvRG309Zmk/s800/emoticon-0106-crying.gif'/> :f



&#160;

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Bku5zCgO_8YzzpkI90nZyCELSUN2x-dyg71NE_puCr-voX_yVCu05nv2ZY-u3gR7CedqEG4U7mztU0IBbtGzE_AX_Kn8wfnczJUCbkExGg6Ss7e41SrlTbZzXCLGhTbdzfyTli4b60w/s800/emoticon-0109-kiss.gif'/> :g



&#160;

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBgj6nk9e2sQldkfk5bYGRLNmvqckdiC0fw1MRnPV8n8lwawptRVgTwScG7p6PNzOiF83zlpKtNgUJdrPqYWHEWy53jSrpYWe7bK_xTm0Q3M7qC2blEF7PhkhWoTMQxQjTmDAfFeJqwq8/s800/emoticon-0111-blush.gif'/> :h



&#160;

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU0Sc-beq1-fhGXu26TLNaa2byKEe5ov8lacIcKEQyUVKlhdIf9uYqX9KYO9GsQJKCCribvzyYq0zt3DvAieUOY8FxreUPn1W_6NpUfcSYLDsSvQQu7-LbhZmc7GNJpupb-DggcaUjJXA/s800/emoticon-0110-tongueout.gif'/> :i



&#160;

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK0_zk549JlXBXHnBro7SeLc1MDIRAjZJJzpT-VSpDGQEyy6Yk0Fl6l-8xfMEQ4Z0_naKuwN5BUcZIVYqkPnk3UoIIyvS2v7C0QDDx041KkAe-rnPQdbEB0cQ-aW8jNWHybuy0YbkqRow/s800/emoticon-0126-nerd.gif'/> :j



&#160;

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil6cjRtQarryFQkib5x5wA96liLbqErYUcR3mSOxFeknmWXQbUQg-_uHvCSGfBLM-EEaWQgCTQrKNXqX7xG97dFyzgdZUwF3ENsUqjY_Ff1uHlJzSrxmV-aq0ZS6kLg3UwkZO7U4fiOIc/s800/emoticon-0103-cool.gif'/> :k



&#160;

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7NyGTSt9xugA5W_gC1NrDJpbs6fSY1zB9TMs5gPX7CXBhYgdKwRkIunt5HJsyJpQ9qTo5OcTOuJSzfaBbW427Pn7SXDYHDBBemg8NT0FBYcwQGDzpFhfP2iKGmVsmPCKNL2B_PS4mSzw/s800/emoticon-0130-devil.gif'/> :l



&#160;

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcYREoDBNvNcTV_zzjHtvYdH48Wcp5Xa77NpoKBGcVUYdmzfhegaOd2K4cLxmLTKZV7oEkDaK8z3DOvyJmmR6Gpd77QcT5XXlWG8teqWYYKvCVC_W3c-Bm01DXLS-kZeV3zGnd5Vlg1jY/s800/emoticon-0133-wait.gif'/> :m



&#160;

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZYjo2l-JnQuiy5-WkN9K2u1lXx1touYpfwczwtixIChBv3PZyR9QVaRyxGfiGXUaG_l43ph_8d_SW5mk0FH-QiJuWcbX9lUwNkai6DzMD_43dcOhpX0KWyHB4mtxlso8ECiRiueBPnEk/s800/emoticon-0137-clapping.gif'/> :n



&#160;

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDss1xcTxk_lOS4WQ_b1YCjGGPu_Nu_eNd2ktgjnOF8_q9UKNz248QXiIq-pbqsNJUC0tbBnfvzBKhqyHCkgdZLKBAyTTN5p2gIk_6F1IMroW9QuXKyQvhWHL8ue_xYTmqPlsTCgCio9I/s800/emoticon-0136-giggle.gif'/> :o



&#160;

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDdXGyuKxSSY2pvXbCimLFxvao2i3mrmY7pUSXzQ8Wc-iez7BuoJ3vuJks0qZrsCgtHmb3fK91Q11Tn7lqHD9GKCOoBuBaGRwMJIwjzFjJ_7fRTMNUF_WOtETY7QspDq4qUTpDwkPHpjI/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/AVvXsEgK0_zk549JlXBXHnBro7SeLc1MDIRAjZJJzpT-VSpDGQEyy6Yk0Fl6l-8xfMEQ4Z0_naKuwN5BUcZIVYqkPnk3UoIIyvS2v7C0QDDx041KkAe-rnPQdbEB0cQ-aW8jNWHybuy0YbkqRow/s800/emoticon-0126-nerd.gif' alt='' class='smiley'/>");

_str = _str.replace(/:k/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil6cjRtQarryFQkib5x5wA96liLbqErYUcR3mSOxFeknmWXQbUQg-_uHvCSGfBLM-EEaWQgCTQrKNXqX7xG97dFyzgdZUwF3ENsUqjY_Ff1uHlJzSrxmV-aq0ZS6kLg3UwkZO7U4fiOIc/s800/emoticon-0103-cool.gif' alt='' class='smiley'/>");

_str = _str.replace(/:l/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7NyGTSt9xugA5W_gC1NrDJpbs6fSY1zB9TMs5gPX7CXBhYgdKwRkIunt5HJsyJpQ9qTo5OcTOuJSzfaBbW427Pn7SXDYHDBBemg8NT0FBYcwQGDzpFhfP2iKGmVsmPCKNL2B_PS4mSzw/s800/emoticon-0130-devil.gif' alt='' class='smiley'/>");

_str = _str.replace(/:m/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcYREoDBNvNcTV_zzjHtvYdH48Wcp5Xa77NpoKBGcVUYdmzfhegaOd2K4cLxmLTKZV7oEkDaK8z3DOvyJmmR6Gpd77QcT5XXlWG8teqWYYKvCVC_W3c-Bm01DXLS-kZeV3zGnd5Vlg1jY/s800/emoticon-0133-wait.gif' alt='' class='smiley'/>");

_str = _str.replace(/:n/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZYjo2l-JnQuiy5-WkN9K2u1lXx1touYpfwczwtixIChBv3PZyR9QVaRyxGfiGXUaG_l43ph_8d_SW5mk0FH-QiJuWcbX9lUwNkai6DzMD_43dcOhpX0KWyHB4mtxlso8ECiRiueBPnEk/s800/emoticon-0137-clapping.gif' alt='' class='smiley'/>");

_str = _str.replace(/:o/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDss1xcTxk_lOS4WQ_b1YCjGGPu_Nu_eNd2ktgjnOF8_q9UKNz248QXiIq-pbqsNJUC0tbBnfvzBKhqyHCkgdZLKBAyTTN5p2gIk_6F1IMroW9QuXKyQvhWHL8ue_xYTmqPlsTCgCio9I/s800/emoticon-0136-giggle.gif' alt='' class='smiley'/>");

_str = _str.replace(/:p/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDdXGyuKxSSY2pvXbCimLFxvao2i3mrmY7pUSXzQ8Wc-iez7BuoJ3vuJks0qZrsCgtHmb3fK91Q11Tn7lqHD9GKCOoBuBaGRwMJIwjzFjJ_7fRTMNUF_WOtETY7QspDq4qUTpDwkPHpjI/s800/emoticon-0141-whew.gif' alt='' class='smiley'/>");

_str = _str.replace(/:a/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvgmN_jg3jvbcKDIBPaXEHmjgROfT_ivTFam1yhupE4VFGhOaMGGGwq_KQWAR_ZV98r35GGIjVq_GV36I7cGZ9W92zn7iqoxsAvBv6MJ8qgjgC4kHnHJLGysDWroFf9GX1W3mLHuEMrkY/s800/emoticon-0100-smile.gif' alt='' class='smiley'/>");

_str = _str.replace(/:b/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDqnWlITo3s9MxdljmEN616UYigKMjFl7UpRhkrKuKEmEfWV03nBv4eW4otjc-8zw9FrGx_cXE6RiGsqR7kLJL0JHTAe5JZeyUtkcYJbWWkP8J52RpCHbzyDp3cR6GvdV5BbTFwBN6nEQ/s800/emoticon-0101-sadsmile.gif' alt='' class='smiley'/>");

_str = _str.replace(/:c/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAHr_FVpci5M5yVRyT3Zrx3bnA4_eMCm1nBDSA9WXQcqhs3pWVMl-TefFvJTcDu3mMFDS-r-0wVTZuy20u1PPiN4TrddKr1nm9gnYYcHCUZzET8IJSPBVKjOf8EpTnYf_X2HEvbNj-h_k/s800/emoticon-0102-bigsmile.gif' alt='' class='smiley'/>");

_str = _str.replace(/:d/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEkfavXJGIsrg64LTkadWfw4m3DJf5bPJqFYk3AYcegZ-mVOSBIn20mYlUSOtlknIigTFSAbNWG1y2jaCpt5oVBuFdz2ccztcWjxYcgQ5DVfAxp4l73LeQWashNvqEw5pwiTUb-MNjJ0I/s800/emoticon-0105-wink.gif' alt='' class='smiley'/>");

_str = _str.replace(/:e/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBWqLkb5iYY-jvHtaUpm_1sDHaH1pBgN4j3gFf32h4ylwVJXV0wxqcsgREF7JyYsqoEFdNYHR4h0L34S0pD1G3kO62kZcihZmSqFEfYVhbemg5JlI0wtg9WbR0UJvDWnmZZOlepFniuI0/s800/emoticon-0104-surprised.gif' alt='' class='smiley'/>");

_str = _str.replace(/:f/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiGoZIhBUrwHlqrhCCeJMLJp9y_uTnLSPZFcQCTE_HkFxkYPrIyEiaoGnWlUFU-4zJhOVjKIUykM0MqrfO6mWNY4P_bammlvD8c4KeecDGcIkyJDpDjwqk_9fDw103NdJV1YvRG309Zmk/s800/emoticon-0106-crying.gif' alt='' class='smiley'/>");

_str = _str.replace(/:g/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Bku5zCgO_8YzzpkI90nZyCELSUN2x-dyg71NE_puCr-voX_yVCu05nv2ZY-u3gR7CedqEG4U7mztU0IBbtGzE_AX_Kn8wfnczJUCbkExGg6Ss7e41SrlTbZzXCLGhTbdzfyTli4b60w/s800/emoticon-0109-kiss.gif' alt='' class='smiley'/>");

_str = _str.replace(/:h/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBgj6nk9e2sQldkfk5bYGRLNmvqckdiC0fw1MRnPV8n8lwawptRVgTwScG7p6PNzOiF83zlpKtNgUJdrPqYWHEWy53jSrpYWe7bK_xTm0Q3M7qC2blEF7PhkhWoTMQxQjTmDAfFeJqwq8/s800/emoticon-0111-blush.gif' alt='' class='smiley'/>");

_str = _str.replace(/:i/ig,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU0Sc-beq1-fhGXu26TLNaa2byKEe5ov8lacIcKEQyUVKlhdIf9uYqX9KYO9GsQJKCCribvzyYq0zt3DvAieUOY8FxreUPn1W_6NpUfcSYLDsSvQQu7-LbhZmc7GNJpupb-DggcaUjJXA/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".

Se este Tutorial o Ajudo Então Comente
Marcadores:

0 comentários:

Postar um comentário

Assinar: Postar comentários (Atom)