Ver entrada completa. Emoticones en los comentarios

Esto lo vi y saque, en donde esta muy bien explicado por JMiur.
Acá voy a poner una manera parecida a la de JMiur con algunas modificaciones.
Entre ellas:
Los emoticones los mostramos con un iframe.
Varios de ellos son animados, me parecen un poco mas atractivos.
Los caracteres que se reemplazan por las imágenes son iguales, cambiando por numeración, ej: :), :1), :2),... :30).

Colocar el script justo antes de esto:

</b:includable>
</b:widget>
</b:section>
</div>

<!-- aquí pondremos el script -->

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

En este caso, se cargará antes de iniciarse la carga de la sidebar.

O podemos ponerlo justo antes de terminar la plantilla:

<!-- aquí pondremos el script -->
</body>
</html>

En cualquiera de los dos casos, debemos agregar lo siguiente:

<b:if cond='data:blog.pageType == "item"'>
<script src='http://vku.webcindario.com/emoticon/emoticon.js' type='text/javascript'/>
<script type='text/javascript'>
emoticonComentario();
</script>
</b:if>

Ahora para poder mostrar los emoticones con un iframe buscamos esto o algo parecido:

<div class='comment-form'>

<h4 id='comment-post-message'/>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0'

Y justo antes de:

<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0'

Colocamos esto:

<center><iframe allowtransparency="true" src="http://vku.webcindario.com/emoticon/emoticon.html" scrolling="no" width="390" frameborder="0" height="100"></iframe></center>

Si quieren pueden subirlo a su servidor y modificarlo a gusto personal, cambiando o agregando sus propias imágenes.

Descargar todo desde acá:

Para modificar o agregar es fácil.
Abrir con el blog de notas el archivo emoticon.js

Ahí pueden ir agregando pegando este código (cambiando los caracteres y las imágenes):

otroTexto = otroTexto.replace(/:30\)/g,'<img src="http://vku.webcindario.com/emoticon/smy00030.gif" />');

(Lo que esta en rojo son los caracteres y en azul donde esta alojada la imagen.)

Justo antes de esto:

bodyText.innerHTML = otroTexto;}
//]]>

También tendrán que modificar el archivo emoticon.html.