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.


45 comentarios

Anonymous · marzo 23, 2012 a las 1:27 am

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

    Juvinao · marzo 24, 2012 a las 2:59 pm

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

MarG Hija del Altisimo · marzo 29, 2012 a las 9:31 pm

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

    Juvinao · marzo 30, 2012 a las 9:19 pm

    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.

F. Fletcher · abril 19, 2012 a las 7:43 pm

:F Gracias.

Andros Andros · abril 28, 2012 a las 7:30 pm

🙂

elcondef · abril 29, 2012 a las 4:15 pm

🙁

N4G4TO · mayo 25, 2012 a las 10:25 pm

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

N4G4TO · mayo 26, 2012 a las 2:56 am

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

N4G4TO · mayo 26, 2012 a las 4:53 pm

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

    Juvinao · mayo 26, 2012 a las 7:41 pm

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

N4G4TO · mayo 26, 2012 a las 8:49 pm

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

    Juvinao · mayo 26, 2012 a las 9:50 pm

    Ya guardastes el script y lo subistes a tu hosting?

    Juvinao · mayo 26, 2012 a las 9:52 pm

    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.

N4G4TO · mayo 26, 2012 a las 11:18 pm

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

    Juvinao · mayo 27, 2012 a las 3:43 pm

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

N4G4TO · mayo 27, 2012 a las 4:26 pm

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

    Juvinao · mayo 30, 2012 a las 2:33 am

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

    Luo Chan · diciembre 25, 2012 a las 7:56 am

    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;
    }

    Hayder Juvinao · diciembre 31, 2012 a las 4:47 pm

    Luo Chan gracias por aportar a esta entrada

jerry24(Penguinmagax)«Official» · julio 26, 2012 a las 11:30 pm

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

Mieri · octubre 2, 2012 a las 4:58 pm

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

    Juvinao · octubre 3, 2012 a las 12:54 pm

    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..

Anonymous · octubre 5, 2012 a las 3:43 pm

GRACIAS:fantasma

edi · noviembre 13, 2012 a las 6:59 pm

hola exelente ayuda gracias

Anonymous · diciembre 2, 2012 a las 3:52 pm

😛

Cronos_2012 · diciembre 28, 2012 a las 3:09 am

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

    Hayder Juvinao · enero 8, 2013 a las 12:43 am

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

Anonymous · enero 5, 2013 a las 6:40 pm

[ma]Buen aporte![/ma]

nacho · enero 8, 2013 a las 9:19 pm

:fantasma:

Jo Car · enero 10, 2013 a las 6:16 pm

:noo:

Anonymous · enero 11, 2013 a las 7:59 pm

🙂
[ma]mmmmmmmmm[/ma]

Toxico SM · enero 17, 2013 a las 11:02 pm

genial!!!

Luis Montelinni · mayo 22, 2013 a las 1:59 pm

:culo: :banana:

Anthony · julio 23, 2013 a las 11:30 pm

LOL

Yerme Moreno · agosto 14, 2013 a las 7:18 pm

😎

Mods Crafting · agosto 28, 2013 a las 1:23 am

:alaba:

Kurisu 日本恋人 · diciembre 13, 2013 a las 8:54 pm

😕

Franz Bacapo · diciembre 21, 2013 a las 5:33 am

🙂

Camilo Fernando Escobar · junio 4, 2014 a las 8:45 am

:d :-d 😎 (h)

Responder a Juvinao Cancelar la respuesta

Marcador de posición del avatar

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