14 enero 2008

Poner emoticonos en tu blog

Como hace poco habréis visto los que nos visitais a menudo, una de las nuevas actualizaciones del blog, es el haber añadido emoticonos. Si tu blog es del tipo Blogger, puedes hacerlo en 3 sencillos pasos:

1- Abrimos la plantilla de nuestro blog:

Personalizar (Navbar) / Plantilla / Edicion de HTML (activamos la casilla "Expandir plantillas de artilugios")

2- En la plantilla buscaremos donde se encuentra la etiqueta:
</head>

Insertaremos antes de esa linea el siguiente código:

<!--Start ATK Emoticons
http://atkblog.blogspot.com-->

<script type="text/javascript">
<!--

function replaceText() {
// no support
if(!document.getElementById) {
return;
}

bodyText = document.getElementById("body");
theText = bodyText.innerHTML;

// replace
theText = theText.replace(/;\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/wink.gif" alt=";)" />');
theText = theText.replace(/;-\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/wink.gif" alt=";-)" />');
theText = theText.replace(/:D/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/biggrin.gif" alt=":D" />');
theText = theText.replace(/:-D/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/biggrin.gif" alt=":-D" />');
theText = theText.replace(/B\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/cool.gif" alt="B)" />');
theText = theText.replace(/B-\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/cool.gif" alt="B-)" />');
theText = theText.replace(/:x/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/mad.gif" alt=":x" />');
theText = theText.replace(/:X/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/mad.gif" alt=":X" />');
theText = theText.replace(/:-x/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/mad.gif" alt=":-x" />');
theText = theText.replace(/:-X/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/mad.gif" alt=":-X" />');
theText = theText.replace(/:-\(/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/sad.gif" alt=":-(" />');
theText = theText.replace(/:\(/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/sad.gif" alt=":(" />');
theText = theText.replace(/:o/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif" alt=":o" />');
theText = theText.replace(/:O/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif" alt=":O" />');
theText = theText.replace(/:-o/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif" alt=":-o" />');
theText = theText.replace(/:-O/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif" alt=":-O" />');
theText = theText.replace(/:p/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif" alt=":p" />');
theText = theText.replace(/:-p/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif" alt=":-p" />');
theText = theText.replace(/:-P/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif" alt=":-P" />');
theText = theText.replace(/:P/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif" alt=":P" />');
theText = theText.replace(/:-\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/smile.gif" alt=":-)" />');
theText = theText.replace(/:\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/smile.gif" alt=":)" />');

bodyText.innerHTML = theText;
}

-->
</script>

<!--End ATK Emoticons-->

3- Ahora buscaremos donde se encuentra la etiqueta:
<body>

Y la sustituiremos por: <body id="body" onload="replaceText();">

Ya tenemos listos nuestros emoticonos. Guardardamos y a disfrutar de ellos ;).

Podemos cambiar las imagenes si queremos, pero eso es un poco avanzado, si necesitas ayuda para eso, contacta conmigo o escribe un comentario.

5 comentarios:

Astyanax dijo...

Hola

Me podrias explicar donde tengo que reemplazar que para que se vean los emoticonos?, hice todo lo que dice en la entrada pero no me sale.

Te lo agradecería mucho

bloggerxero dijo...

hola! La verdad me interesaron mucho los articulos de tu blog y quisiera extender una invitacion intercambiar enlaces con tu web, somos un equipo y actualmente tenemos dos proyectos para publicitar blogs, para obtener mas visitas y mas trafico, asi que te invito a leerlos y a participar de alguno o de los dos, un gran saludo y desde ya muchas gracias por leer el mensaje!

bloggerxero cadena de enlaces!

Directorio bloggero, enlaza tu blog!
exitos! sigue asi con tu blog! ta chulo :)

_Ar7yK_ dijo...

Hola astyanax,

Esto se debe hacer en un blog, por lo que veo no tienes ningun blog (al menos no del tipo blogger), asi que no se yo si para otro tipo de blogs tambien se podra hacer.

Yo por ahora tengo los emoticonos desactivados, ya que me han dado problemas.

Tienes que insertar el codigo que adjunté justo antes de donde aparece la etiqueta HEAD.

Y lo que tienes que reemplazar es la etiqueta BODY, lee despacio la entrada del blog, esta todo bien explicado. Si hay algun problema, mandame un email. Saludos!

Marener dijo...

saludos, gracias por tu explicasion, clarisima, pero a mi no me sale los emoticos en mi blog de dieta
donde puydiera enivarte un email?

Kaede dijo...

¿Es posble agregar mas emoticones?