Diego Cabai | Blog

La idea de este artículo es explicar una forma de agregar emoticons o caritas en Blogger automáticamente. Con esto quiero decir que cuando escriban :) les aparecerá una carita similar a esta . Puede ser esta carita o el ícono o gráfico que nosotros querramos y el sistema funciona no sólo para insertar emoticons sino que uno puede cambiar cualquier palabra o símbolo por imagen automáticamente con este sistema. Por ejemplo, yo puedo configurarlo para que cuando escriba “casa” me aparezca el gráfico de una casa automáticamente. Obviamente que este ejemplo no tiene mucha utilidad pero quiero demostrar lo que se puede hacer. En este caso voy a tomar unas caritas que ya estan hosteadas, pero si queres customizar el sistema con tus propios emoticons primero deberías subirlos a la web, hostearlos en algún lado. Podés usar Picasa web para esto, o Google Pages como otra opción gratuita y efectiva. Para esto hay que modificar el código HTML del Blog así que como siempre te recomiendo que antes realices un Backup del mismo.

En principio debes instalar el siguiente código justo antes del </head>:

<!–BloggerEmoticons–>
<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 style=”border:none;vertical-align:middle” src=”http://photos1.blogger.com/blogger/7678/802/1600/wink.gif” alt=”;)” />’);
theText = theText.replace(/;-\)/g,‘<img style=”border:none;vertical-align:middle”  src=”http://photos1.blogger.com/blogger/7678/802/1600/wink.gif” alt=”;-)” />’);
theText = theText.replace(/:D/g,‘<img style=”border:none;vertical-align:middle” src=”http://photos1.blogger.com/blogger/7678/802/1600/biggrin.gif” alt=”:D” />’);
theText = theText.replace(/:-D/g,‘<img style=”border:none;vertical-align:middle” src=”http://photos1.blogger.com/blogger/7678/802/1600/biggrin.gif” alt=”:-D” />’);
theText = theText.replace(/B\)/g,‘<img style=”border:none;vertical-align:middle” src=”http://photos1.blogger.com/blogger/7678/802/1600/cool.gif” alt=”B)” />’);
theText = theText.replace(/B-\)/g,‘<img style=”border:none;vertical-align:middle” src=”http://photos1.blogger.com/blogger/7678/802/1600/cool.gif” alt=”B-)” />’);
theText = theText.replace(/:x/g,‘<img style=”border:none;vertical-align:middle” src=”http://photos1.blogger.com/blogger/7678/802/1600/mad.gif” alt=”:x” />’);
theText = theText.replace(/:X/g,‘<img style=”border:none;vertical-align:middle” src=”http://photos1.blogger.com/blogger/7678/802/1600/mad.gif” alt=”:X” />’);
theText = theText.replace(/:-x/g,‘<img style=”border:none;vertical-align:middle” src=”http://photos1.blogger.com/blogger/7678/802/1600/mad.gif” alt=”:-x” />’);
theText = theText.replace(/:-X/g,‘<img style=”border:none;vertical-align:middle” src=”http://photos1.blogger.com/blogger/7678/802/1600/mad.gif” alt=”:-X” />’);
theText = theText.replace(/:-\(/g,‘<img style=”border:none;vertical-align:middle” src=”http://photos1.blogger.com/blogger/7678/802/1600/sad.gif” alt=”:-(” />’);
theText = theText.replace(/:\(/g,‘<img style=”border:none;vertical-align:middle” src=”http://photos1.blogger.com/blogger/7678/802/1600/sad.gif” alt=”:(” />’);
theText = theText.replace(/:o/g,‘<img style=”border:none;vertical-align:middle” src=”http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif” alt=”:o” />’);
theText = theText.replace(/:O/g,‘<img style=”border:none;vertical-align:middle” src=”http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif” alt=”:O” />’);
theText = theText.replace(/:-o/g,‘<img style=”border:none;vertical-align:middle” src=”http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif” alt=”:-o” />’);
theText = theText.replace(/:-O/g,‘<img style=”border:none;vertical-align:middle” src=”http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif” alt=”:-O” />’);
theText = theText.replace(/:p/g,‘<img style=”border:none;vertical-align:middle” src=”http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif” alt=”:p” />’);
theText = theText.replace(/:-p/g,‘<img style=”border:none;vertical-align:middle” src=”http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif” alt=”:-p” />’);
theText = theText.replace(/:-P/g,‘<img style=”border:none;vertical-align:middle” src=”http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif” alt=”:-P” />’);
theText = theText.replace(/:P/g,‘<img style=”border:none;vertical-align:middle” src=”http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif” alt=”:P” />’);
theText = theText.replace(/:-\)/g,‘<img style=”border:none;vertical-align:middle” src=”http://photos1.blogger.com/blogger/7678/802/1600/smile.gif” alt=”:-)” />’);
theText = theText.replace(/:\)/g,‘<img style=”border:none;vertical-align:middle” src=”http://photos1.blogger.com/blogger/7678/802/1600/smile.gif” alt=”:)” />’);

bodyText.innerHTML = theText;
}

–>
</script>

<!–End BloggerEmoticons–>

En este caso utilicé los emoticons que estan en la URL de Blogger, pero estas URL se pueden cambiar con las emoticons que cada uno tenga. Mas abajo dejo unos links de donde obtener otras emoticons para cambiar el diseño. También tiene configurado el border en 0 píxels y que esten alineadas en el centro con la opción vertical-align:middle. Esta parte se puede eliminar si es que queremos que no este alineada. Es importante que al guardar la plantilla luego de modificarla respete los espacios y los saltos de línea. Revisa esto antes de consultar el por qué no funcionó el código. A veces cuando uno hace copy y paste dentro del código no copia bien los saltos de línea.

Como último paso debemos editar el código HTML de nuestro blog nuevamente y buscar el siguiente texto: <body> y reemplazarlo con la siguiente línea:

<body id=”body” onload=”replaceText();”>

Listo, con esto ya está listo y podes empezar a escribir emoticons en tu blog que se va a mostrar las caritas. Recuerda que esto va a modificar TODO lo que se escriba en el blog, incluso los comentarios y hasta puede llenarte el blog de imágenes. Si me pedís recomendación yo te diría que no lo habilites y si deseas usar emoticons o caritas en tus posts o artículos, utilices el Windows Live Writer para escribirlos con el plugin de Smileys.

Source | Blogger Emoticons
URL1 | MSN Emoticons
URL2 | Yahoo Messenger Emoticons
URL3 | Yahoo Hidden Emoticons

Compártelo

 Email |  Imprimir |  PDF