Emoticones - copiar y pegar en el formulario

A petición de varias personas vamos a añadir los emoticones en los comentarios y al mismo tiempo añadiremos una tabla sobre el formulario con la idea de poder copiar y pegar los emoticones.

Los emoticones, o mejor dicho el script los añadiremos directamente a la plantilla, nos evitamos con ello buscar alojamiento externo para el script. Hay otra forma de añadirlos, es una excelente idea que J.Miur explicó en su día, se trata de añadir el script en el interior de un gadget de HTML evitamos con ello buscar alojamiento externo y manipular la plantilla, en ambos casos recomiendo antes de empezar guardar copia de la plantilla por si comentemos algún error poder enmendarlo.

1- Añadimos los emoticones en la plantilla.

En plantilla, edición de HTML justo después de ]]></b:skin> añadimos los estilos para que los emoticones queden en la misma línea del texto:

<style type='text/css'>

.comment-body p img {vertical-align: top; padding-right: .3em;}

</style>

Copiamos el contenido de este archivo y lo pegamos a continuación del anterior.
Guardamos los cambios y marcamos para expandir la plantilla buscaremos el siguiente código de comentarios:

<dd class='comment-body'>

<b:if cond='data:comment.isDeleted'>

<span class='deleted-comment'><data:comment.body/></span>

<b:else/>

<p><data:comment.body/></p>

</b:if>

</dd>

La línea en negrita la vamos a sustituir por lo siguiente:

<p expr:id='&quot;combody-&quot; + data:comment.anchorName'><data:comment.body/></p>

<script type='text/javascript'>

cual = &quot;combody-&quot; + &quot;<data:comment.anchorName/>&quot;;

emoticonComentario(cual);

</script>

Si probamos veremos que nuestros comentarios ya tienen la opción para añadir emoticones.

2- Añadimos la tabla.

En plantilla edición de HTML tenemos que buscar lo siguiente:

<b:includable id='comment-form' var='post'>

<div class='comment-form'>

<a name='comment-form'/>

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

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

<data:blogTeamBlogMessage/>

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

<!-- Aquí pegaremos la tabla de emoticones -->

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>

La tabla que debemos añadir la podemos copiar del siguiente archivo.
¿El ejemplo? en el formulario de comentarios de esta misma entrada.

Las imágenes del script son gentileza de J.Miur de Vagabundia y están alojadas en ImageShack, las de la tabla las he alojado en Blogger. Recomiendo sustituirlas por otras alojadas en el sitio que normalmente usa cada uno.

El proceso es muy sencillo, copiamos la url de cada emoticon y la pegamos en la barra del navegador, cuando visualizamos la imagen la descargamos a nuestro PC, de esa forma las podemos subir en una entrada del blog o directamente en el en álbum de Picasa. Copiamos la nueva url y la sustituimos por las que contiene el script y la tabla.
Si queremos seguir jugando con los emoticones quizás interese "Emoticones y algo más"