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/AVvXsEgiFLMEkQ-qjtpPC3cxq-8OUOl2sdVjn6bhaBOYA0PDPmySrBzv3eYYw_-kGNcALjTEBZH7rz2f00owPwIzXgUQGhmy5Yid4MSRpMjNfMiYAAKKLztpRGAuxh7KVuBDnp3xrpOvNzo8Fhg/s800/emoticon-0100-smile.gif'/> :a

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

 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG4sR9V2advINcBqnrWpoI8RM2pyofZzvKzgV2TKtwHduMI11qRyAn7jcpsuRfhD1A-VjBp002ac1bYA5RU9LyFDF2JuNp-q_xcfjJToo49ytFD5x8Wq6oOyXls6nmORwIIUzb-bLq6zY/s800/emoticon-0102-bigsmile.gif'/> :c

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

 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvePfKBaT9KUFypY8TylbOBKTE9BC_73XqBLyt1nWQBaK31T7QosRGYf5B-MjJm5bpK-WqMcW6tGNn7jrZiErcaWec8u03oOHIf-Z9_Q1f0NPX5Qn4jbIWE9cx36reHFu_Iq_mf-O7cZc/s800/emoticon-0104-surprised.gif'/> :e

 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5NRybWFMezergMnpdk8MF562vLibJSlE7CJ9pA4XNaZstryNOu1J_kl6lZODWrZckHfdRKrFM1hAMIs-68Nftw0Z5L_5MA5U4gzEPrZ-Aj4oW74S9pTjLD9mUNDLK_Zqbg09H9bAmPSo/s800/emoticon-0106-crying.gif'/> :f

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

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

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

 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT8RSoiLv5Ir91RrukKYgV5Hr2gu_lSCzrnhsv8XSs6-Q7YYvMrwLSC3FSUmqhyOefMaRTTm5Sx6vEcnNGkYkAqNsCRCjgwxV8ebKXXpJz7qm7KY6wsdusaKPzPokhfeVMxPyh6GY7RQY/s800/emoticon-0126-nerd.gif'/> :j

 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja73opsHUeQlulnAZe03PxoDhypzMWQa2XD2nsk4OJ-i88POsbHqKNnYCgJAhXVFJ7eiq2W0Vl6KmTltE6MzbF-pwrWZYMsII05ZMK_mXatp_CnEpwLB7zvpXwZjzqzXzGY7V0AXOjYbs/s800/emoticon-0103-cool.gif'/> :k

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

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

 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7LsedQZqoNghxcfNdyKC0_UbfdTHAYRXE61U8tPNsMr-jqEdRrYzy0L6ZBwV12r7z-LLhQWAWpqZF2ivxqxFv5U2e0SY9METI_3mi_Gd7yZtPQoRIAUdyNtbXTVUMjbeFz5l3Ry7IcGA/s800/emoticon-0137-clapping.gif'/> :n

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

 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqYQwiL7nQPUElPt2rWSB0RGe33rml3sqcW_1c80L7Oalq3p3LDyljQdY_2LMWf7n3v0SMNIgM7ODD2goo3RU-0Tx9HaRQob7k32AnEbiTXBombR6xPhdtxwEl9JudjUKDalgIv_Q4JEg/s800/emoticon-0141-whew.gif'/> :p

 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX-Y_ArId7pUKc2dL3MGMF_6yJ7ILAQiosAfCja_t1R0pjtctVr5hgzX2cujd4GZZ2Cjnv6yjJR-XSal_6KsaLqOUaJVZfKKyD94ez-9Ggj9L_ckczpOqXQY-zKIGiV2cS3fNxMl215-g/s800/emoticon-0148-yes.gif'/> :q

 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfQ3UlTBz7Z8Wzs6jlKo6dErCMRLjt806g2OVS4p5_HDbhv5Z40cUMfst0dDvAj7uhea1IpjN5vkgis1KeUZbr6RnW9r1XFUbUILa0Pgb_DBsDtDMX-6uutgklxEuUymwRAQyiEJdbJOk/s800/emoticon-0149-no.gif'/> :r

 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfpadwBBg9yQaSBORiKDpbNw44jIAvlHhA9IgKSrobR5pj1JE8m3aGxY7kPSqlK6ZVZ6Qjmg6Fz4ma_i-E5ispZf4Scai3hHVvmQPx2cXzqASbkiftAErn5wqwnFMn6TxFo4gSAvoOJDI/s800/emoticon-0178-rock.gif'/> :s

 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc-6yZyvPHCNguCPvoiDdwN7NrG1xmFc6kFcrepHKvbFvXle7VEgQ5a34p5mjSIFFWls5RRwhw1lzpjLphCLjI_0omtf1bXzo1a9AwK5HP3AZjcGL6TyvGG4F5ORBZ20prdALyy-aNODs/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/AVvXsEiT8RSoiLv5Ir91RrukKYgV5Hr2gu_lSCzrnhsv8XSs6-Q7YYvMrwLSC3FSUmqhyOefMaRTTm5Sx6vEcnNGkYkAqNsCRCjgwxV8ebKXXpJz7qm7KY6wsdusaKPzPokhfeVMxPyh6GY7RQY/s800/emoticon-0126-nerd.gif' alt='' class='smiley'/>");
_str = _str.replace(/:k/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja73opsHUeQlulnAZe03PxoDhypzMWQa2XD2nsk4OJ-i88POsbHqKNnYCgJAhXVFJ7eiq2W0Vl6KmTltE6MzbF-pwrWZYMsII05ZMK_mXatp_CnEpwLB7zvpXwZjzqzXzGY7V0AXOjYbs/s800/emoticon-0103-cool.gif' alt='' class='smiley'/>");
_str = _str.replace(/:l/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3hnZv8F4zycncYhyJ_k863fsZtL2xqaEh_Kh-ljk98RvSNTOdNjEWV8aiz9mndIz5Y96YA0-8wsrOTFHRP_kdGKCzcUqkVgMlLRUBRZMPgUYzcXPPOle9Tkfv7a4F70oKSg60ShGAHng/s800/emoticon-0130-devil.gif' alt='' class='smiley'/>");
_str = _str.replace(/:m/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi55Xt9bE3A3hrzfMoo67kDrL8Q6XhdZwt9Clo0ISp45e6kuny0y_zcIxTxzydmgCBDMmwmJKmLMSpyDsmHRtpkFt9r1Zj4MOALeKXR13yCxDGlOh6uAv7dYpbyos9Q-wqHbCUwRBZUhXI/s800/emoticon-0133-wait.gif' alt='' class='smiley'/>");
_str = _str.replace(/:n/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7LsedQZqoNghxcfNdyKC0_UbfdTHAYRXE61U8tPNsMr-jqEdRrYzy0L6ZBwV12r7z-LLhQWAWpqZF2ivxqxFv5U2e0SY9METI_3mi_Gd7yZtPQoRIAUdyNtbXTVUMjbeFz5l3Ry7IcGA/s800/emoticon-0137-clapping.gif' alt='' class='smiley'/>");
_str = _str.replace(/:o/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitjhP-M9ixA1CK8JKHBHoYR9gcJ166kH8Nm4F1g-T_1gJmu051pp6xhS0XSPPbt7MXtnamqSKJ1_h49nuPHBlVnXg6CFpu4MaxIg0xZmKCGsUl8puuTcDhbmKNxbMIoQEdRGoBgrcrBRY/s800/emoticon-0136-giggle.gif' alt='' class='smiley'/>");
_str = _str.replace(/:p/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqYQwiL7nQPUElPt2rWSB0RGe33rml3sqcW_1c80L7Oalq3p3LDyljQdY_2LMWf7n3v0SMNIgM7ODD2goo3RU-0Tx9HaRQob7k32AnEbiTXBombR6xPhdtxwEl9JudjUKDalgIv_Q4JEg/s800/emoticon-0141-whew.gif' alt='' class='smiley'/>");
_str = _str.replace(/:q/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX-Y_ArId7pUKc2dL3MGMF_6yJ7ILAQiosAfCja_t1R0pjtctVr5hgzX2cujd4GZZ2Cjnv6yjJR-XSal_6KsaLqOUaJVZfKKyD94ez-9Ggj9L_ckczpOqXQY-zKIGiV2cS3fNxMl215-g/s800/emoticon-0148-yes.gif' alt='' class='smiley'/>");
_str = _str.replace(/:r/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfQ3UlTBz7Z8Wzs6jlKo6dErCMRLjt806g2OVS4p5_HDbhv5Z40cUMfst0dDvAj7uhea1IpjN5vkgis1KeUZbr6RnW9r1XFUbUILa0Pgb_DBsDtDMX-6uutgklxEuUymwRAQyiEJdbJOk/s800/emoticon-0149-no.gif' alt='' class='smiley'/>");
_str = _str.replace(/:t/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc-6yZyvPHCNguCPvoiDdwN7NrG1xmFc6kFcrepHKvbFvXle7VEgQ5a34p5mjSIFFWls5RRwhw1lzpjLphCLjI_0omtf1bXzo1a9AwK5HP3AZjcGL6TyvGG4F5ORBZ20prdALyy-aNODs/s800/emoticon-0155-flower.gif' alt='' class='smiley'/>");
_str = _str.replace(/:s/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfpadwBBg9yQaSBORiKDpbNw44jIAvlHhA9IgKSrobR5pj1JE8m3aGxY7kPSqlK6ZVZ6Qjmg6Fz4ma_i-E5ispZf4Scai3hHVvmQPx2cXzqASbkiftAErn5wqwnFMn6TxFo4gSAvoOJDI/s800/emoticon-0178-rock.gif' alt='' class='smiley'/>");

_str = _str.replace(/:a/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiFLMEkQ-qjtpPC3cxq-8OUOl2sdVjn6bhaBOYA0PDPmySrBzv3eYYw_-kGNcALjTEBZH7rz2f00owPwIzXgUQGhmy5Yid4MSRpMjNfMiYAAKKLztpRGAuxh7KVuBDnp3xrpOvNzo8Fhg/s800/emoticon-0100-smile.gif' alt='' class='smiley'/>");
_str = _str.replace(/:b/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkfSE6I-CFlde_p76lXvRVuDXe5Mq76UCxQjM4WK23SpnSn5_kamwoYSiyfuIloOo7l9OY5EeZsap3W5fQga8lEoxso6lH0sFi2N2f3BYWvKVvPyt5hTxgkYROhyfuzDOO7qcSJFHhFRE/s800/emoticon-0101-sadsmile.gif' alt='' class='smiley'/>");
_str = _str.replace(/:c/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG4sR9V2advINcBqnrWpoI8RM2pyofZzvKzgV2TKtwHduMI11qRyAn7jcpsuRfhD1A-VjBp002ac1bYA5RU9LyFDF2JuNp-q_xcfjJToo49ytFD5x8Wq6oOyXls6nmORwIIUzb-bLq6zY/s800/emoticon-0102-bigsmile.gif' alt='' class='smiley'/>");
_str = _str.replace(/:d/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi416x4W3UxtAJsxLcYi52WtENAUBiw4HdsfbB5wphH7e_ZAcxaMMxNNpewPfzbd_TKeKWurpOZsy9OjYVbRbGX8QlX__ZiYNA5BCHbWbEkuGhLHH4MR7HQd993-NJ83gS8ITnBRWQKtso/s800/emoticon-0105-wink.gif' alt='' class='smiley'/>");
_str = _str.replace(/:e/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvePfKBaT9KUFypY8TylbOBKTE9BC_73XqBLyt1nWQBaK31T7QosRGYf5B-MjJm5bpK-WqMcW6tGNn7jrZiErcaWec8u03oOHIf-Z9_Q1f0NPX5Qn4jbIWE9cx36reHFu_Iq_mf-O7cZc/s800/emoticon-0104-surprised.gif' alt='' class='smiley'/>");
_str = _str.replace(/:f/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5NRybWFMezergMnpdk8MF562vLibJSlE7CJ9pA4XNaZstryNOu1J_kl6lZODWrZckHfdRKrFM1hAMIs-68Nftw0Z5L_5MA5U4gzEPrZ-Aj4oW74S9pTjLD9mUNDLK_Zqbg09H9bAmPSo/s800/emoticon-0106-crying.gif' alt='' class='smiley'/>");
_str = _str.replace(/:g/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF_fSAqh4XiBK4_5eCr78wl4IgEX4GleP1DCcWfKwky2rNu2dw-YVJsrANMg3NcqkFNeE9gIEwCT_wFPIQD_mQa10BKysI4eN3jqciYtxR8lC673TE0JSlFJ3VWlt_RJIJufbWVljn3zI/s800/emoticon-0109-kiss.gif' alt='' class='smiley'/>");
_str = _str.replace(/:h/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY_4oiw8Gv_F3LlN8wz0fk_l-JkLKemA8knEO_5i_6TzUlE9F1qhvel4W1QVUeTJJ2qJ7mzgxR3MtPqSAajMiYE5sbhuGIOUAdOd0-IF99dqa10ylQM0azrhc5hgWKnxb0VVIJM0B2KpE/s800/emoticon-0111-blush.gif' alt='' class='smiley'/>");
_str = _str.replace(/:i/ig,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtJCcsw0X168isliSY5Q5Hi5M9lnaFrkLsxDw2UkVYxB_P2ODIUuzyss4zUNmaiWdXFvWEcaQJnXuk2LK9_PvczPEZDzteRazGzxoXmmU_cQz5j0OBcmkQyf_DlLAc9aQkA0MgIPswbKw/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.

VISTO EN:My Blogger Tricks

ElHackerZ