emoticonos

Emoticonos de Skipe en Blogger

Skipe es un servicio gratuito que nos posibilita el hacer llamadas, videollamadas y enviar mensajería instantánea a través de Internet y que seguro muchos de vosotros ya conocéis.

Entre otras cosas, Skipe utiliza unos emoticonos muy bonitos para comunicarnos a través de su chat, y son estos emoticonos los que en esta entrada veremos como usar en nuestro blog de Blogger.

En primer lugar vamos a ver como incluir una imagen con los emoticonos y sus símbolos sobre el formulario de comentarios, para que nuestras visitas sepan como usar cada emoticono.

[1] En nuestro panel de Blogger nos situamos en Edición HTML.

[2] Marcamos ahora la casilla de "Expandir plantillas de artilugios".

[3] Localizamos esta línea de código:

<p><data:blogCommentMessage/></p>

[4] Justo debajo, pegamos este código:

<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/AVvXsEjhHxB-RTpg6UOH2YSlSUTzhfb4-i6yws3SDip_SainNi2Ts3LPbrILLdPdFxEjTNPLnX68ZywNrEMTGyO6VcHracfSOonYdC-9935SovvyJrAMpTjjzGOa2SVT4f7T3V76WanSEqwbW1I/s800/emoticon-0100-smile.gif'/> :a

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

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

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

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

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

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

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

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

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

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

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM4bJDH00MtXYol-KL4NmIqcXbLhsG2JMqnyBwYjUBZd-HVFcDqNapJ0_n4BCwQVWXwmIWQfxjupv1ijJabTRQp2eL1BY9v0oH-YMWItiLJ3Av-5aCSlwZVR4UAWi_gSw1yPxPuOaGfxs/s800/emoticon-0130-devil.gif'/> :l

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

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

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

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

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXwtmCvsoENdnE4Wvjo-tgRIwyBlAiwdDyA8iS_4Vmfkr3Ww-XUMPwQmbSiGdTAhZrXxhXjV3JXFdNTIuZNQZLn0KWU6h1kZuaFksHRDyyfbwPo911Pxm5QMg4Ag1eaYUO8Rd258I-WaU/s800/emoticon-0148-yes.gif'/> :q

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH3mP3EXCx07EUslYv5x_yE4N0QxN4Wg2mhAhhE0ZiMKCy_AaFw22YWlwfldSOV7gOvqAnSQ__dYntDzakSmCDd1S59P8HcikjYxE7Ooh1YrTanKglULYRU0dfAmT2dfxGBGSuL61aafU/s800/emoticon-0149-no.gif'/> :r

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0YEtREwSBpl4Fkd18MTFsmURAHR3B9HMlHCzKwqMKr86j8voger-_n-WrT8q9b7mDtgvZyDxa8tY-GBzC5-PSCHAtEhquJC_mgeMBt_gO-XdpbMPWl1I2XV9MFOCp_j2wigcIb4yHKjA/s800/emoticon-0178-rock.gif'/> :s

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCU8nojwL1hOby6T9MtehHS-EYVT94Go_aXRNiD1MaFDXl4liqdXYF9o8xm3tHFHmEp2Oi0BYODd2nX3mkDppjN6VmN7WO4Z-jFscWTYFS3My78RTwoSEGdqCyRS8Ok_zRIsf9xFOb6ZY/s800/emoticon-0155-flower.gif'/> :t
</div>

[5] Guardamos los cambios y ya podemos comprobar que sobre el formulario de comentarios estarán los emoticonos y sus símbolos correspondientes.

Esto solo es una imagen de ejemplo, los emoticonos se muestran realmente en movimiento

Una vez incluida la imagen con los emoticonos, vamos a ver como incluir en la plantilla el código (script) que hará posible el usar los emoticonos en los comentarios.

[5] Localizamos la etiqueta </body> en nuestra plantilla (casi al final del código de la misma) y, justo sobre ella, pegamos el script:

<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/AVvXsEgzW6MkHMjxhYauQ8JmcY7icmwmSAMJOSZqWXKDMLAX_qZlIVlI1UuD8VwkTLZtRMfYEV_cJoftaACFg6SjSG33jaPPqRuWQXc6O6_c7c9xyQAgdc5SINiSgmYp-7dZeCW1nTAVjMMTip4/s800/emoticon-0126-nerd.gif' alt='' class='smiley'/>");
_str = _str.replace(/:k/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg45mxlCBinlpiAVH6oH2nd7XKiZmIbMKluaUoXhoJl26JaQWvSYYJ_jBs8r622kqwa2le1U8NEmNIA2W6kH5fAJ_Q9GV4wrQu7zCF4L6Xnc4gfpMOMLN65FLdivWPRdzXdWP1Oazb3_fc/s800/emoticon-0103-cool.gif' alt='' class='smiley'/>");
_str = _str.replace(/:l/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM4bJDH00MtXYol-KL4NmIqcXbLhsG2JMqnyBwYjUBZd-HVFcDqNapJ0_n4BCwQVWXwmIWQfxjupv1ijJabTRQp2eL1BY9v0oH-YMWItiLJ3Av-5aCSlwZVR4UAWi_gSw1yPxPuOaGfxs/s800/emoticon-0130-devil.gif' alt='' class='smiley'/>");
_str = _str.replace(/:m/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCad9EVwRBc4N4NRWpPfmLmUhd4EW0ZPEVooFP5JsDf3VWHPsC_I-B8oLhwdNboDOBU8gtrIQLz1MHX0Ls9ePR8noFc5s2T38b89wIMZMFCSZ_VgT2-SD5GGcYg82jkC6C6ceumcIh584/s800/emoticon-0133-wait.gif' alt='' class='smiley'/>");
_str = _str.replace(/:n/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDn0encV7JrqPRT0EDY5JaAgRCeYjLg6Lrr-fw_LRbIlOKvup0P4xJnLC8IYhCZVYZ_Sfk_ANPHKxxfK4yd1tX_brQ7hZ7CsYec3PrP46_RQgZjY7jfbLMQI5mPpYJkFZ1B8sgICkGpOQ/s800/emoticon-0137-clapping.gif' alt='' class='smiley'/>");
_str = _str.replace(/:o/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQYPnAJ6HUHbMmCbThESfq04q68Sx_bZ9D8gBlP1NTCotpu3dwyxY0NGpiJ461K0YSWKWhJBy5tB9onZblv2MfC0tryh7ZlHYHQSys2qtU6Xltgf-ohZX3BUY6Za7iXAmixALcqg-FHeU/s800/emoticon-0136-giggle.gif' alt='' class='smiley'/>");
_str = _str.replace(/:p/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ0GVJzV0ncXR1zWtzjKvAYZw0JSJFc_ghzqNhsQWns2LBBSLCdT4aos5jhyphenhyphenSF0QYSA-mRP3gCDXyziDXAs0KkX_AWNo4mSYzAdDgKeByib5wa65IDXpPw61-5fG12RkSsG3XzjPm9Dsw/s800/emoticon-0141-whew.gif' alt='' class='smiley'/>");
_str = _str.replace(/:q/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXwtmCvsoENdnE4Wvjo-tgRIwyBlAiwdDyA8iS_4Vmfkr3Ww-XUMPwQmbSiGdTAhZrXxhXjV3JXFdNTIuZNQZLn0KWU6h1kZuaFksHRDyyfbwPo911Pxm5QMg4Ag1eaYUO8Rd258I-WaU/s800/emoticon-0148-yes.gif' alt='' class='smiley'/>");
_str = _str.replace(/:r/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH3mP3EXCx07EUslYv5x_yE4N0QxN4Wg2mhAhhE0ZiMKCy_AaFw22YWlwfldSOV7gOvqAnSQ__dYntDzakSmCDd1S59P8HcikjYxE7Ooh1YrTanKglULYRU0dfAmT2dfxGBGSuL61aafU/s800/emoticon-0149-no.gif' alt='' class='smiley'/>");
_str = _str.replace(/:t/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCU8nojwL1hOby6T9MtehHS-EYVT94Go_aXRNiD1MaFDXl4liqdXYF9o8xm3tHFHmEp2Oi0BYODd2nX3mkDppjN6VmN7WO4Z-jFscWTYFS3My78RTwoSEGdqCyRS8Ok_zRIsf9xFOb6ZY/s800/emoticon-0155-flower.gif' alt='' class='smiley'/>");
_str = _str.replace(/:s/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0YEtREwSBpl4Fkd18MTFsmURAHR3B9HMlHCzKwqMKr86j8voger-_n-WrT8q9b7mDtgvZyDxa8tY-GBzC5-PSCHAtEhquJC_mgeMBt_gO-XdpbMPWl1I2XV9MFOCp_j2wigcIb4yHKjA/s800/emoticon-0178-rock.gif' alt='' class='smiley'/>");

_str = _str.replace(/:a/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhHxB-RTpg6UOH2YSlSUTzhfb4-i6yws3SDip_SainNi2Ts3LPbrILLdPdFxEjTNPLnX68ZywNrEMTGyO6VcHracfSOonYdC-9935SovvyJrAMpTjjzGOa2SVT4f7T3V76WanSEqwbW1I/s800/emoticon-0100-smile.gif' alt='' class='smiley'/>");
_str = _str.replace(/:b/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqDhDIkLW4agn0hSv64H7El82wAGuvAecpnxcsXaaY_CyS9cK7FJAncoWwVtwxsHm6U0V7aliQMh9t2Isf9wqbCx8BZhPibxiCaoYR2qDUArLRBRO9qNHoqy7Rr1OrV8r0CK7ggGdrL_A/s800/emoticon-0101-sadsmile.gif' alt='' class='smiley'/>");
_str = _str.replace(/:c/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-vXcbTgPnQd1gdVhw6zFvz-Ria2crxmi5P8FUbcQEC1tgBgX1hiHQpKLKUI7B_hIFEqanXUrVygj0mbHh1qr3hNt_4MFqgwlKA3EZ_hIrn6Qdy1Tc_p9wHasYtTLKFLE5AcHy1akKQl0/s800/emoticon-0102-bigsmile.gif' alt='' class='smiley'/>");
_str = _str.replace(/:d/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj77I89BlItLkglcGftefrURWW0uSe6E4sVVsv-6ycxzlMah1ygTjYv6iQ4Kl_P8762SsczjNTAwe_J9OJloP9ZXoKdPXGVz6ri1FWXo-5363TAFcq0_PzcMhrpBjvNKgHiofIV35CbMOk/s800/emoticon-0105-wink.gif' alt='' class='smiley'/>");
_str = _str.replace(/:e/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaLqYLF8A8ZLoPOvW4z29ASMzq3bdFDivLoRz9CW2wcHeny6Q10NYhq45HUTC2lZlIKnGbJNk1j77ujifMx3o1EHMXLPsbNH3cTrqjIwOA5iSHtl88BXCiYKKqWyXQmBejkoKpow6KuRE/s800/emoticon-0104-surprised.gif' alt='' class='smiley'/>");
_str = _str.replace(/:f/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh88rohdY7e9FlDEIcnUGBqC6OzqLj4KIAOG8qJ3s1mJ-EcP-Hf2enSWpNMzPObNDEWJCGonaQ4q8VQjM6pJKt907MECarcn12Eyw1sTD58g9jjg7HTdhPFWnlo2QZAJMcWdqQ1DLgCQ5Q/s800/emoticon-0106-crying.gif' alt='' class='smiley'/>");
_str = _str.replace(/:g/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8wn2Dx6yY8YQFlTyJH6lqP5GEsDzCHBaw2l_yLUlxTJLfjPUuSewrvXvKjCpHC1022sfpiLtBaR_uHrlJbmKabJTThJ8SHEGkH8YuS-5IFw1mjM9URfrEz4fA5xf-_U5D9oh1ZVi8yLo/s800/emoticon-0109-kiss.gif' alt='' class='smiley'/>");
_str = _str.replace(/:h/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikYDT2G645FwlJN-kQbOBRQMHZN7NXBnDH0omrfrfy5ri9LPvTgSvccS7aeNQ1loC6CvdUFoF2kM26OUskm0NItH8AVRjE3fOdR4XdYHIkGegA4oyLXZ4tDtVpbl43x11BmLS0aJi6tfY/s800/emoticon-0111-blush.gif' alt='' class='smiley'/>");
_str = _str.replace(/:i/ig,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicbgAsPkbIKimLboplLDl0wutdY4G7oKNBjazrwp0MtJ4N8M5Ct_XLIGFrOyd7FlY8chWA1Ec6bebLYTP5K5B-5M27pSO-TP8GxpGNh9uInqKZC9eU5EDtpoi2L19Q0fZmXrkggaXixvw/s800/emoticon-0110-tongueout.gif' alt='' class='smiley'/>")
b.item(i).innerHTML = _str;
}
}
}

//]]>

</script>

[6] Guardamos cambios.

Nota:

Para cambiar el diseño del rectángulo (div) donde van incluidos los emoticonos sobre el formulario, lo haremos en la primera línea del código:

<div style=' width: 370px; text-align: left; border: 2px solid #0084ce; background: #FEF9EA; padding: 10px; color:#0084ce; font-weight:bold;'>

width: 370px; Cambiamos el ancho del recuadro.

text-align: left; Alineación, en este caso a la izquierda.

border: 2px solid #0084ce; Grosor, aspecto y color del borde.

background: #FEF9EA; Color de fondo del rectángulo-contenedor.

padding: 10px; Distancia de los emoticonos (contenido) al borde.

color:#0084ce; Color del texto (los símbolos).

font-weight:bold; Fuente en negrita.