Mil Trucos Blogger

Agrega tus propios Emoticones a tu blog

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

Muchos bloggers buscan agregar emoticones en su blog,pero para ello dependen de blogs de ayuda bloggers para poner emoticones en sus blogs pero hoy les voy a enseñar como agregar sus propios emoticones a sus blogs.


El siguiente codigo corresponde al script que utilizaremos para hacer el llamado del emoticon al blog:

*/


function emoticonComentario() {

if(!document.getElementById) {return;} // no soportado

bodyText = document.getElementById('comments');

emoticon = bodyText.innerHTML;

// :) :-) :-]
emoticon = emoticon.replace(/:)/g,'<img src="http://static.mobile9.com/bbcode/smileys/smile.gif" />');
emoticon = emoticon.replace(/:-)/g,'<img src="http://static.mobile9.com/bbcode/smileys/smile.gif" />');
emoticon = emoticon.replace(/:-]/g,'<img src="http://static.mobile9.com/bbcode/smileys/smile.gif" />');

// X(
emoticon = emoticon.replace(/X(/g,'<img src="http://static.mobile9.com/bbcode/smileys/tongue.gif" />');


// :cool:
emoticon = emoticon.replace(/:cool:/g,'<img src="http://static.mobile9.com/bbcode/smileys/wink.gif" />');

// :cry:
emoticon = emoticon.replace(/:cry:/g,'<img src="http://static.mobile9.com/bbcode/smileys/laugh.gif" />');


// :blaf:
emoticon = emoticon.replace(/:blaf:/g,'<img src="http://static.mobile9.com/bbcode/smileys/frown.gif" />');

// :winky:
emoticon = emoticon.replace(/:winky:/g,'<img src="http://static.mobile9.com/bbcode/smileys/thumbup.gif" />');

// :noo:
emoticon = emoticon.replace(/:noo:/g,'<img src="http://static.mobile9.com/bbcode/smileys/blush.gif" />');

// :twisted:
emoticon = emoticon.replace(/:twisted:/g,'<img src="http://static.mobile9.com/bbcode/smileys/byebye.gif" />');

Lo que esta en azul corresponde a la URL del emoticon,alli es donde debes poner la URL de tu emoticon (en la primera parte del codigo tienes que repetir la URL de la imagen 3 veces,de aqui en adelante solo tendras que poner la URL solo una vez).

Lo que esta en rojo corresponde al codigo que se utilizara en los comentarios para que aparezca el emoticon.

Luego guardas el archivo en un editor de texto (ej. Bloc de Notas) con extension .js y lo subes a un hosting como Dropbox o Google Sites,alli te dan la URL y la tendras que pegar antes de </body> siguiendo la siguiente estructura.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='URL DEL ARCHIVO .JS' type='text/javascript'/>
<script type='text/javascript'>
emoticonComentario();
</script>
</b:if>

Con esto ya tendras listo los emoticones pero ahora hace falta mostrar una lista de los emoticones para que los lectores los puedan usar.

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='divspoiler'>
<img onclick='if (this.parentNode.nextSibling.childNodes[0].style.display != &apos;&apos;) { this.parentNode.nextSibling.childNodes[0].style.display = &apos;&apos;; } else { this.parentNode.nextSibling.childNodes[0].style.display = &apos;none&apos;;}' src='http://3.bp.blogspot.com/-NVnnuH5VK6M/T1OKnwBNp5I/AAAAAAAAAz8/UDsvHVEj7Yw/s1600/Sin+t%C3%ADtulo-1.png'/>
</div><div><div class='spoiler' style='display: none;'>
<div class='comment-content' id='bc_0_1MC'>
<img src='http://static.mobile9.com/bbcode/smileys/smile.gif'/> :) <img src='http://static.mobile9.com/bbcode/smileys/tongue.gif'/> X( <img src='http://static.mobile9.com/bbcode/smileys/wink.gif'/> :cool: <img src='http://static.mobile9.com/bbcode/smileys/laugh.gif'/> :cry: <img src='http://static.mobile9.com/bbcode/smileys/frown.gif'/>  :blaf: <img src='http://static.mobile9.com/bbcode/smileys/thumbup.gif'/> :winky: <img src='http://static.mobile9.com/bbcode/smileys/blush.gif'/> :noo: <img src='http://static.mobile9.com/bbcode/smileys/byebye.gif'/> :twisted: <img src='http://static.mobile9.com/bbcode/smileys/clapping.gif'/>:D <img src='http://static.mobile9.com/bbcode/smileys/wow.gif'/> :oops: <img src='http://static.mobile9.com/bbcode/smileys/help.gif'/> :? <img src='http://static.mobile9.com/bbcode/smileys/devil.gif'/> :F
<img src='http://static.mobile9.com/bbcode/smileys/wub.gif'/> :alaba: <img src='http://static.mobile9.com/bbcode/smileys/cry.gif'/>:lpmqtp: <img src='http://static.mobile9.com/bbcode/smileys/thumbdown.gif'/> :idiot:</div></div></div></b:if>

Lo que esta resaltado en verde es la URL del emoticon y lo que esta en rosa es el codigo del emoticon.

El anterior codigo lo deberas pegar debajo de

      <div class=’post-footer-line post-footer-line-3′>

Con esto ya hemos terminado el tutorial  y tendras listo tus emoticones ,espero que les haya sido de utilidad.

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

45 Comentarios

  1. Anonymous Anonymous
    marzo 23, 2012    

    Gracias Juvinao excelente tutorial,de verdad muy bueno con esto agregare mis emoticones 🙂

    • marzo 24, 2012    

      Que bueno que te haya parecido util,un saludo amigo.

  2. marzo 29, 2012    

    Gracias por el tutorial, me encanta!!!!
    Pero una pregunta:
    Como logro guardarlo bajo la extencion.js?

    Eso es lo que no se como se hace.
    Si me pudieras ayudar en esto te lo agradeceria bastate!

    Tambien quisiera preguntarte, si es posible poner emoticomes de tamano mediano y con animacion gif?
    Gracias

    • marzo 30, 2012    

      Mira Marg en un editor de texto yo recomiendo bloc de notas) cuando vayas a guardar el archivo lo guardas TUARCHIVO.JS le pones el .js luego del nombre y listo.

      En cuanto a los emoticones gif,si puedes poner gif y cualquier imagen que quieras.

  3. abril 19, 2012    

    :F Gracias.

  4. abril 28, 2012    

    🙂

  5. abril 29, 2012    

    🙁

  6. mayo 25, 2012    

    no salen los emoticonos en mi caja de comentarios. no los reconoce
    http://battlestadium-don.blogspot.com/

  7. mayo 26, 2012    

    ayuda! me salen hay pero al poner el comando solo se ve la letra y no se vuelve imagen

  8. mayo 26, 2012    

    me quedo en la parte del popup
    yo no quiero esos emoticones quiero crear el popup con mis propios emoticones :S

    • mayo 26, 2012    

      Pues es facil,reemplaza la URL de los emoticones de la entrada por la URL de tus emoticones y listo.

  9. mayo 26, 2012    

    mira esta entrada http://battlestadium-don.blogspot.com/2012/05/tripack-maps-anime.html
    aparece los emoticones pero no los reconoce al ponerlos en un comentario

    • mayo 26, 2012    

      Ya guardastes el script y lo subistes a tu hosting?

    • mayo 26, 2012    

      Ya se cual es el problema,creo que tu reemplazastes las URLS de las imagenes solo en la zona de comentarios pues bien tambien las debes reemplazar en el script y reemplazar el comando con el que aparecera el emoticon.

  10. mayo 26, 2012    

    el script ya lo subi y lo reemplaze en el scrip tmbien
    te paso el link para que lo veas https://dl.dropbox.com/u/81554601/emoticones%20one%20piece.js

    • mayo 27, 2012    

      Sube las imagenes a Picasa y si todavia no te funciona me avisas.

  11. mayo 27, 2012    

    el problema no es el host de imagenes. (ya lo subi a subirimagenes)
    el problema es que no reacciona al poner el comando
    asi como tu pusiste :Shock: tan solo se vio el texto y no se puso como imagen

    • mayo 30, 2012    

      La verdad es muy raro,debes ser un error en el script,me tomara un tiempo revisarlo bien.

    • diciembre 25, 2012    

      lo que sucede N4G4TO es que el codigo del js hay que cerrar las llaves hasta lo último es necesario despues de:

      // 😈
      emoticon = emoticon.replace(/:twisted:/g,'<img src=”http://static.mobile9.com/bbcode/smileys/byebye.gif” />’);
      colocar para cerrar

      bodyText.innerHTML = cualTexto;
      }

    • diciembre 31, 2012    

      Luo Chan gracias por aportar a esta entrada

  12. julio 26, 2012    

    Juvinao Sube link de un Hosting en el que no nos tengamos que registrar no encuentro ninguno…

  13. octubre 2, 2012    

    y si no quiero dejar los emoticones para uso del público? Me salto el paso nada más, verdad?

    • octubre 3, 2012    

      Mieri pues el ultimo ultimo paso es para mostrar la lista de emoticones.

      Pero ten en cuenta que tendras que sabes que codigo ejecutar para que aparezca el emoticon..

  14. Anonymous Anonymous
    octubre 5, 2012    

    GRACIAS:fantasma

  15. edi edi
    noviembre 13, 2012    

    hola exelente ayuda gracias

  16. Anonymous Anonymous
    diciembre 2, 2012    

    😛

  17. diciembre 28, 2012    

    una pregun quiero agregar mas emotion pero me desactiva todos sera porque los nuevos son un poco mas grandes y pesan mas

    • enero 8, 2013    

      No tiene nada que ver, deberia funcionarte el script correctamente 😕

  18. Anonymous Anonymous
    enero 5, 2013    

    [ma]Buen aporte![/ma]

  19. enero 8, 2013    

    :fantasma:

  20. enero 10, 2013    

    :noo:

  21. Anonymous Anonymous
    enero 11, 2013    

    🙂
    [ma]mmmmmmmmm[/ma]

  22. enero 17, 2013    

    genial!!!

  23. mayo 22, 2013    

    :culo: :banana:

  24. julio 23, 2013    

    LOL

  25. agosto 14, 2013    

    😎

  26. agosto 28, 2013    

    :alaba:

  27. diciembre 13, 2013    

    😕

  28. diciembre 21, 2013    

    🙂

  29. junio 4, 2014    

    :d :-d 😎 (h)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo