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.

26 comentarios:

  1. Amé esta entrada :23) y puse los emos (claro los modifique) oye una cosita he notado que tu blog apresar del montón de trucos que tiene (que por cierto, me encantan). Como haces para que carge tan rápido? Dios, please respóndeme te lo agradecería mucho :7) amo estos iconos :13)

    ResponderEliminar
  2. Globar: me alegro te guste.

    Y que suerte que te carga rápido a mi realmente me demora la primera ves casi un minuto, y estoy por cambiar la plantilla por ese motivo.

    Generalmente demora cuando uno tiene muchas entradas en la primera página y muchas imagenes etc...

    ResponderEliminar
  3. Globar: fijate esta entrada
    http://loseasi.blogspot.com/2009/07/consejo-para-cargar-la-pagina-mas.html

    Lo que yo vi de tu página es que tiene muchas imagenes muy grandes.

    Los videos tambien demoran mucho; es conveniente utilizar un enlace a ellos, yo utilizo lightwindow para mostrar videos y flash.

    Y lee bien la entrada que te marque.

    ResponderEliminar
  4. Muy buen dato, lo copio en la entrada correspondiente. :)

    ResponderEliminar
  5. ya pude implementar los emoticons como planteó JMIur me preguntaba como puedo mostrarlos en el mensaje de formulario apra comentarios, asi como lo tenes tu

    ResponderEliminar
  6. yo lo puse con una tabla

    copia mi código fuente si quieres y cambia los link de las imágenes.

    o ve pegando dentro de un div para darle forma las imagenes:

    algo así:

    <div style="width: 500px; height: 170px;">
    :) <img src="http://img179.imageshack.us/img179/2107/com-smile.gif"/>
    :( <img src="http://img179.imageshack.us/img179/557/com-cry.gif" />
    </div>

    ResponderEliminar
  7. a ver voy a intentarlo y de alli te comento :1)

    ResponderEliminar
  8. soy muy noob para esto jajaj, perdona que te moleste pero donde pongo la tabla ^^

    ResponderEliminar
  9. Yo la puse acá:

    <h4 id=&apos;comment-post-message&apos;/>
    <p><data:blogCommentMessage/>


    TABLA


    </p>
    <data:blogTeamBlogMessage/>
    <a expr:href=&apos;data:post.commentFormIframeSrc&apos; id=&apos;comment-editor-src&apos;/>
    <iframe allowtransparency=&apos;true&apos; class=&apos;blogger-iframe-colorize&apos;

    ResponderEliminar
  10. <h4 id='comment-post-message'/>
    <p><data:blogCommentMessage/>


    TABLA


    </p>
    <data:blogTeamBlogMessage/>
    <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
    <iframe allowtransparency='true' class='blogger-iframe-colorize'

    ResponderEliminar
  11. Listo gracias !!

    tengo una pregunta, se puede eliminar el "Suscripción por correo electrónico" que aparece abajo?

    ResponderEliminar
  12. No creo ya que es un macro

    Misterio cuando pongas una entrada es conveniente que pongas la fuente

    ResponderEliminar
  13. SI eso trato de hacer, pero el mismo post lo he encontrado en varias paginas y me ha sido dificil asi q mejor no lo puse(veraz que en muchos SI he puesto la fuente, como las que ultice del escaparate nombrandola varias veces), pero si notais solo he puesto en CCS blogger todo lo que utilice para armar el blog q tengo ahora.

    Una ultima pregunta he visto que en el escaparate las "paginas" creadas (esa opcion q te da blogger para crea en un maximo de 10") [yo no quiero molestar mas a rosa parece que ya tiene suficiente jajajaj con la gente que ayuda, aqui se esta mas calmado ^^] me preguntaba como se hacia para mostrar un pagina sin la side bar.

    ResponderEliminar
  14. Hola Vku espero estes bien sabes e aplicado este truco en mi blog de pruebas al principio no encontraba el codigo html pero lo logre ubicar en el codigo de la pagina es que no lo vi en la descarga que proporcionas bueno en fin ya eso esta solventado pero me gustaria saber si es posible agregar un fondo a los emoticonos el codigo me a quedado asi..

    <center>
    <table width='400px'>
    <tbody><tr>
    ....................
    ..................
    ..............
    .........
    </tbody>
    </table>
    </center>

    lo e intentado aplicando estilos pero creo que aun no soy muy bueno en eso y en el CSS no se en que parte se le pueda aplicar o cual sea el codigo que se le deba agregar para lograr que solo los emoticonos sean los que tengan un fondo y no toda el area espero me puedas ayudar en eso :6)

    Por cierto esta muy bueno el tutorial gracias :23)

    ResponderEliminar
  15. Intenta así:

    <center><div style="background: #ccc;width:400px"><iframe allowtransparency="true" src="http://vku.webcindario.com/emoticon/emoticon.html" scrolling="no" width="390" frameborder="0" height="100"></iframe></div></center>

    Cambia el color: #ccc y ajusta el tamaño que tu quieras.

    ResponderEliminar
  16. Disculpa como puedo hacer esta clase de archivo
    http://vku.webcindario.com/emoticon/emoticon.html
    Si me puedes ayudar te lo aagradeseia un monto

    ResponderEliminar
  17. Eso esta hecho con tablas.
    Fijate el Código Fuente de la página:

    view-source:http://vku.webcindario.com/emoticon/emoticon.html

    ResponderEliminar
  18. @ Vku:

    Muhas grasias por la yuda ..Haora tengo otra duda como o endonde lo subes para q tenga la terminacion .html

    ResponderEliminar
  19. Antes lo subia a xooimage, pero ahora ya no lo permite.
    Yo no recomiendo ningun servidor gratuito pero igual podes poner los link directo en la plantilla en lugar del iframe.

    Fijate el código fuente:

    view-source:http://vku.webcindario.com/emoticon/emoticon.html

    ResponderEliminar
  20. Saludos Vku, acabo de descubrir tu blog, y se me resolvieron muchas dudas que tenía.
    GRACIAS :19)

    Y aprovechando el tema de los comentarios siempre he querido saber si se pueden ordenar primero los nuevos y al final los antiguos comentarios (lo contrario a como lo hace por defecto blogger. ?????

    ResponderEliminar
  21. Gracias hector.
    lamentablemente eso de los comentarios no se pueden cambiar.

    ResponderEliminar
  22. Hola vku, por fin lo ice andar, cambie los emoticones y arme otra tabla como vos sugeriste y todo anduvo, una cosa en el comentario 11 vos indicas donde pusiste la tabla, yo la puse como indicas al principio del tutorial, antes de esta linea
    <iframe allowtransparency='true' class='blogger-iframe-colorize'.... y anda perfecto.
    A la tabla la puse en un div con el estilo de tu iframe (sacando los estilos que no pertenecen a div).
    Gracias pr compartir. :23)

    ResponderEliminar
  23. Me alegro Juan, y me gusta mucho que se animen a hacer pruebas y entender lo que y para que son los códigos. Es la mejor forma de aprender.

    ResponderEliminar

Si tienes alguna opinión respecto a la entrada, tienes un punto de vista distinto, o simplemente quieres saludar, te invito a que dejes un comentario. NO SE ACEPTAN LINKS DE REFERIDOS para que los comentarios no se conviertan simplemente en una forma de publicitarse.

Nota: solo los miembros de este blog pueden publicar comentarios.