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

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

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

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

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

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

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

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

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

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

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

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

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

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

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvELup-KPE5-4yda5Pa_5jfT5DOp6xACs8VcKw-dc2-Un6FmwdMQjwtyzEGtZDK9kmzpPLjvcysBU9XZVVUlR9XA5fK9mqPphyphenhyphennb8V_Il6iRJvpt5fNr095S23x-YYSuk35kzNFnaOX6Y/s800/emoticon-0136-giggle.gif'/> :o

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

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyIa-bh_bu70iemz_Oxq2NVJgeeXCMFtb6aq0G24BJBS2Jyl-t6BEsvJE66iJaPw9tpkY8YfI1lSfKRolC0gwDlb5tBd9c7nw09ntX7MXZR0Vfvv9nS1JvFWeZ10HC2_-U4O5AbkDe-oU/s800/emoticon-0148-yes.gif'/> :q

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

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA8XwC0rqlX3NFfq89Lj3jyqYGb25wi5VMpdAY0f6t_QkCRebNzMCg6VT5AJdJL_H6d6zEd79raLc58SjVbBIRckbu4VL1Zqw7npHYhftg0IiYhzP-jD4MfqBevETd-S_sG7jinqW97wE/s800/emoticon-0178-rock.gif'/> :s

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFm5ekP4AumB3FDl9JXlbS0cvwU54WeKT6VK12g3VI6ldkZ9W991NzX4TBwxucL3CWs6KPGZMcgMHppYDThbrlYBDLARTKqDNAYIhuW-IjeWAiQef76AvDra5dUYUjAlORbYrr8cNS4D8/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/AVvXsEhC3ksl-_Hd-SDAvsRsw9fIuxm1_HVPilpObP0hjZH9Ytt75U2GaWRLDypIeXDijwdGLVpcMoFEBiK3U1v2wO7csiRdHZ6rbQhv_d8zWaRUnS7kqIh2kQ1iPTuPngkSHREwpJ-KgRAjqvY/s800/emoticon-0126-nerd.gif' alt='' class='smiley'/>");
_str = _str.replace(/:k/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPfOiPDaqH-0q6_BgZ0X6GD_rWW36RJLgLd8N-V7ORyw2QnEUvATOKzDVoFiGCd2itR0v70UzVWycDTSrU1GnwTP0ZrpBsrezq6V9tjMKg5OdzOzhD0xN76Oe4gNyt8ciUR6tX5_dKfYE/s800/emoticon-0103-cool.gif' alt='' class='smiley'/>");
_str = _str.replace(/:l/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_12duhfLI08ct7MiG0tJD5HNIkhDr3P8x0n7dkCN9i2o74LyMGIpa6s764RVkN99YJbrXRTfoE95LFFPSVnBunYH4j1kPfdX6Hyt_fge2dr57b-JHhX8ZbIGYw-Pce6YKWGiXLFd7y_0/s800/emoticon-0130-devil.gif' alt='' class='smiley'/>");
_str = _str.replace(/:m/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ_VfKB92vIxH7RN1_QkwNiPhbBOOj_3dN2ceS_uk-MGCLfO6tfHleuQHAlgQ-FaCXrep5T5n5-y8LpxHmQZLRTvjfP3Zqnl0g0e8eZfbRw3V3tZK6VbG8v7vd_C1PRoPFqP4shEaj_Dc/s800/emoticon-0133-wait.gif' alt='' class='smiley'/>");
_str = _str.replace(/:n/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPGSgBJoBeag67uXeqO-xdKx_tWDmYJEZlo_X4HnQki4xUGvajfLBFVUX6haQa_VTLi1U-Sm1g_pU5Kw2xzOAXeZi5NZVQy0JZeE3hCt28_1KMLalT4IC8XD8avAgUjrVpuk4dPFQx5SE/s800/emoticon-0137-clapping.gif' alt='' class='smiley'/>");
_str = _str.replace(/:o/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvELup-KPE5-4yda5Pa_5jfT5DOp6xACs8VcKw-dc2-Un6FmwdMQjwtyzEGtZDK9kmzpPLjvcysBU9XZVVUlR9XA5fK9mqPphyphenhyphennb8V_Il6iRJvpt5fNr095S23x-YYSuk35kzNFnaOX6Y/s800/emoticon-0136-giggle.gif' alt='' class='smiley'/>");
_str = _str.replace(/:p/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtA5oiB3hMOm7eXavHdcur43MSb4Gy5Bngq5Cdx4u3Ja4L9nrLHSBAG0nD-38FASY0Uhw73ih0wCf7la4ZZIoL202cQ0T0AhJYg260a-_aXi4MArVryixsUMJSOALVpWDMT73WkD0HxBI/s800/emoticon-0141-whew.gif' alt='' class='smiley'/>");
_str = _str.replace(/:q/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyIa-bh_bu70iemz_Oxq2NVJgeeXCMFtb6aq0G24BJBS2Jyl-t6BEsvJE66iJaPw9tpkY8YfI1lSfKRolC0gwDlb5tBd9c7nw09ntX7MXZR0Vfvv9nS1JvFWeZ10HC2_-U4O5AbkDe-oU/s800/emoticon-0148-yes.gif' alt='' class='smiley'/>");
_str = _str.replace(/:r/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE_m5ZVubW2qEwr9HNi850CpEvuCLLtRcIXSlgKZ5raXQiH2RDGqkZBIL_MW5JnXud_EF0LZXVzcV0XD6A2qsP0-5BzflmwCMA1HLWqezzxcTQiQjxQaelZAf4DtZQUscFk7LJRBt0rxI/s800/emoticon-0149-no.gif' alt='' class='smiley'/>");
_str = _str.replace(/:t/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFm5ekP4AumB3FDl9JXlbS0cvwU54WeKT6VK12g3VI6ldkZ9W991NzX4TBwxucL3CWs6KPGZMcgMHppYDThbrlYBDLARTKqDNAYIhuW-IjeWAiQef76AvDra5dUYUjAlORbYrr8cNS4D8/s800/emoticon-0155-flower.gif' alt='' class='smiley'/>");
_str = _str.replace(/:s/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA8XwC0rqlX3NFfq89Lj3jyqYGb25wi5VMpdAY0f6t_QkCRebNzMCg6VT5AJdJL_H6d6zEd79raLc58SjVbBIRckbu4VL1Zqw7npHYhftg0IiYhzP-jD4MfqBevETd-S_sG7jinqW97wE/s800/emoticon-0178-rock.gif' alt='' class='smiley'/>");

_str = _str.replace(/:a/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWCfAPSAzJgEAXjJP8JQ0r9wB1dxEdUeTtXOdorImQX3w5UYy7l7ffnNpDek0xH5dszQ-H_TKoQmZC327JWkpsCJjtsApyvgJP8NCGsG3SWVMpUhMqwddBo0hcC3DnQkHOb84F1ngIPio/s800/emoticon-0100-smile.gif' alt='' class='smiley'/>");
_str = _str.replace(/:b/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCnhw5v7qgde6u37TmODbeoXAOIVTwaLQSd0ye-BgjsXubMV3pGgvLjUR36rTmhu_hPT6tsdvtjymrrlFgOfJ-50XnaREoigd3y8gyJGjeFrHxhA2jsX6fF9na8EIEGh3ZBG3ATyj6Uog/s800/emoticon-0101-sadsmile.gif' alt='' class='smiley'/>");
_str = _str.replace(/:c/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic39dQ1xpvOW5enif4_yA9uZh8X5duCLP1xSzjzahyv-xl4BwRYKT4FcWh3-LWzwKXvOwizVxz-IfvdAPur_yRxIMXoeXTf00Y9STFkwfryhOxqTQH7kxLKK2V4wOwxkLb7fShJ4quC9Q/s800/emoticon-0102-bigsmile.gif' alt='' class='smiley'/>");
_str = _str.replace(/:d/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9smYTpFgmWGVoKfvpAyUN_cD3wWsXce0uFBueYn6OmvXM1dGqqZnkE0uqxEVSG3YO-nXQRQeVsr_Iddk5Lxx7U1JXC562Q9TBt1k_6oZX0P3Oaoliw0Jb1oVAOW-2n9MAb5UMdFuJb28/s800/emoticon-0105-wink.gif' alt='' class='smiley'/>");
_str = _str.replace(/:e/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg39VvMdPLJYmTjtqABVWeQnl2Yj9Sgxzk7jByCYrCtmNXU0Cj01nOp37qONdl25jPXr6SW1_7YDVn9CCB8GtoATCdl6li73bxWgX4jpB8ruOTQPWvMbRjzeecRZtCYjyRcB2OUGMo4gt0/s800/emoticon-0104-surprised.gif' alt='' class='smiley'/>");
_str = _str.replace(/:f/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOqCsmKqNCuFLQRYWauxk7FasVdyUqdyXuOhSGFYurGJqZtuenk5TurtuFP6TPnKZ8wGJMf0JtV2aRQGDi6CVnkfMY-BBKSXr4CPRBPEFP1qDsAGxpfVQI6uskVlZDY6L3TDITiZ_VhXg/s800/emoticon-0106-crying.gif' alt='' class='smiley'/>");
_str = _str.replace(/:g/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidUpYfvOf_uxiUHQGOZdmjBZ3G6a7qQl7PFi1gyh_53hKnicx0gioPjx5KNrrtAmUAu0GIDk9zibo7DUcUmSNNaeI2sWTSfj6hepr00an1F10X7znqXTt6J6wjQJEd_tgrMl9lvit4Pbg/s800/emoticon-0109-kiss.gif' alt='' class='smiley'/>");
_str = _str.replace(/:h/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMK0JMwA9yu5pFWovr1V1RFI4QC2nb8l37XwPsxQiqTE-SM_mFb5vHLarHdGU2kPw7E6HFYtXIjRIVnkEdArdE2sSG1tYyX3B_OG_sXSN55yrgFvcGtA0ORk77sVtzola7RCtE0hjvPTk/s800/emoticon-0111-blush.gif' alt='' class='smiley'/>");
_str = _str.replace(/:i/ig,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb88FOTLsRLE48RIqHabxHiBdvaW-FAGDcxSgjT8EEIHiMrugd7tT2U0g4FLsTNhzva4KZNjy7cXIpAkcuFRYS1XgNoxV8EZ13jPYZPgbxULTSkLNqtwKWd27iV7DL-xZqxv8CN7NhAgc/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

Iconos Manto

Los he visto en noobr y me han encantado.

Pack con 20 iconos de caritas muy originales en formato .png y con unas dimensiones de 128 x 128.

Añadir emoticonos de Yahoo a Blogger

Ahora podemos usar los emoticonos de Yahoo en nuestro blog (entradas y comentarios) sin demasiadas complicaciones.

[1] Nos descargamos este script para una vez guardado en nuestro PC, subirlo a un alojamiento apropiado.

[2] Una vez obtenida la url del script, lo colocamos en nuestra plantilla desde "Edición HTML", justo antes de </body> de este modo:

<script src='Url_del_script_aqui' type='text/javascript'></script>

[3] Si estamos usando el nuevo formulario de comentarios de Blogger, podemos añadir los emoticonos sobre el, y así informar a nuestras visitas de los símbolos que han de usar para mostrar los emoticonos en los comentarios.

Vamos de nuevo a la pestaña de "Edición HTML" de nuestro panel y marcamos "Expandir las plantillas de artilugios". Localizamos este código:

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>

<h3><a expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a></h3>
</b:if>
</b:if>
</p>
</b:if>

Sustituimos ese código por este otro:

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<div style='width: 383px; text-align: left; border: 1px solid #cdc9c9;margin:0px auto; padding: 5px; background: #eee9e9; height:86'>
<b>
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/>:))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/>w-)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/78.gif' width='26'/>:-j
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/>:D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/>;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/>:p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/>:_(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/>:)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/>:(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/>:X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/>=((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/>:-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/>:-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/>:|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/>:-T
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/>:]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/>x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif' width='30'/>o%
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/>b-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/>:-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/>@X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/>=))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif' width='18'/>:-?
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif' width='28'/>:-h
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif' width='21'/>I-)
</b>
</div>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
</b:if>

Aquí podéis ver un ejemplo de los emoticones funcionando.

Añadir smileys a Cbox

He visto en algunos blogs que están usando el chat o tagboard de Cbox que en el panel para escoger smiles o emoticonos, tienen añadidos algunos más de los que vienen incluidos en Cbox por defecto.

Hacer esto es bastante sencillo:

[1]- Escogemos el smile que nos gusta y lo guardamos en nuestro PC.

[2]- Lo subimos a un hosting o alojamiento de imágenes ( ImageShack, por ejemplo)

[3]- Copiamos la url que nos proporciona el hosting que en el caso de ImageShack sería la que vemos en último lugar.

[4]- Ingresamos en nuestra cuenta de Cbox y en el panel de la derecha pinchamos en smilies

[5]- Se abrirá una tabla con los smileys que están incluidos en nuestro chat por defecto, abajo del todo vemos un botón que pone "New Row", cada vez que pinchemos en este botón, tendremos un nuevo espacio disponible para añadir la url de nuestro nuevo smile (la que hemos conseguido en ImageShack).


[6]- Guardamos cambios en "Save"

Smiles añadiendo una sola línea

Como lo acabáis de leer... una preciosa colección de smiles para nuestro blog añadiendo una sola línea en la plantilla justo después de ]]></b:skin>

<script src='http://escaparatederosa.googlepages.com/addSmiley.js' type='text/javascript'/>

Para asegurar que no vaya a fallar mi alojamiento o no vaya a cambiar de pronto la url del archivo, podéis descargar el script y alojarlo vosotros mismos.

VISTO EN:Blogging Secret

Emoticonos en tu blog

Es una bonita forma de expresar sentimientos cuando nos parece que las palabras no son suficientes o, simplemente nos apetece adornar un poquito nuestros post consiguiendo que tanta letra junta no se vea tan aburrida.

[1] Nos descargamos el script a nuestro PC, lo descomprimimos y lo subimos a un alojamiento de archivos adecuado.

A continuación tenéis que añadir dentro del <head> de vuestra plantilla justo encima de </head> esta línea e incluir la url del script:

<script src='URL_DEL_SCRIPT' type='text/javascript'></script>

Y, justo casi al final de todo el código de la plantilla, antes de </body>, colocáis este otro:

<script language='javascript'>
addSmiley();
</script>

En la parte del CSS de la plantilla, para evitar que los emoticonos se desplacen o se vean con borde, añadís esto:

.post-body img#new {
margin:0px;
padding:0px;
border:none;
}

Las caritas se verán en tus entradas y en los comentarios cuando están expandidos. Una vez el blog acabe de cargar aparecerán los emoticonos, esto impide que obstaculice el tiempo de carga de la página.

VISTO EN: The Last Word