Cómo agregar emoticones en los comentarios de tu blog

¡Hola!

Se me ha ocurrido que quizás a algunos les gustaría tener esto en sus cajas de comentarios. Aclaro que podrán cambiar las imágenes de emoticones si lo desean, solo dejaré los que ya venían.

Esto es una traducción de un tutorial ya hecho pero que estaba en inglés. Abajo de todo les dejo adjunta la página.

¡Empecemos!

RECUERDEN QUE PARA COPIAR EL CÓDIGO DEBEN HACER CLICK EN VIEW RAW

1. Plantilla - Crear/Restablecer copia de seguridad

2. Plantilla - Editor html

3. Click en el recuadro de código y hacer Ctrl+f

4. Buscar </body>

Aquí presten atención ya que son dos caminos dependiendo del sistema de comentarios que tenga su blog.

Si su blog es de la versión anterior de comentarios de blogger y que no posee el botón de responder (como aparece en mi blog), deben pegar esto antes de la etiqueta:

Si su blog sí posee la función de responder un comentario, entonces esto es lo que irá arriba de </body>

Si tienen la función de responder comentarios ignoren los pasos del 5 al 8.

5. Busquen con Ctrl+f

<b:loop values='data:post.comments' var='comment'>

6. Encima de esa línea, coloquen esto:

<div id='smileys'>

7. Busquen con Ctrl+f

</b:loop>

8. Después de esa línea coloquen esto:

</div>

9.

 a) Ahora, para los que tengan el viejo sistema de comentarios busquen esto:

<data:blogTeamBlogMessage/>

ACLARACIÓN: Si encuentran más de cuatro veces esta línea, deténganse en la segunda (hagan enter dos veces).

b) Si tienen el nuevo sistema, busquen esto:

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

10. Antes de cualquiera de esas dos líneas, deben pegar este código:
Como pueden ver, más debajo de la caja de comentarios aparece "Show emoticones", eso es para que los usuarios sepan qué caritas usar y con qué caracteres.

Si no quieren eso allí, entonces antes de la opción a o la opción b, deben pegar esto:
Pueden notar que hay links, esas son las imágenes que representan a cada emoticon. Pueden personalizarlos si desean y cambiar los links. Tengan cuidado a la hora de hacerlo.

11. Para finalizar, busquen esta línea: ]]></b:skin>

Justo encima, coloquen esto:

.itemo{float:left;font-size:11px;height:30px;line-height:1.2;padding:10px 0;text-align:center;width:85px;}
span#smiley-toggle{clear:both;padding:15px 10px;float:left;font:bold 14px 'Oswald', sans-serif;}
span#smiley-toggle a{text-decoration:none;}
#smiley-toggle img{vertical-align:bottom;}
img.smiley{vertical-align:bottom;}

Den en vista previa para verificar que no haya ningún error y si no hay problemas, guardan la plantilla.

¡ESO ES TODO!

FUENTE

 Recuerda seguirme en facebook para estar al día de mis actualizaciones: