Colocar Emoticones Automágicamente (automáticamente) en Blogger

Como se han podido dar cuenta, uso mucho las caritas de los emoticones, jeje, entonces averigüe como hacer para que automágicamente me transforme : ) por:) y encontré esta página

Blogger y los emoticones

En esta explican como implementar una función en Javascript que lo único que hace es correr una serie de replace() en el contenido remplazando los caracteres de las caritas por el código html para insertar una imagen. Aunque la forma en la que la implementan es solo para los comentarios, los cuales se muestran solo cuando la página esta mostrando solo un post. Yo lo implemente para mis posts y de manera controlada, ya que mientras hacia este post tuve problemas con ocaciones en las que el JavaScript me remplazaba :) por una carita cuando no quería. Aunque esto evito que hiciera el cambio tan autmágicamente, pero en ocaciones es mejor tener control de las cosas.

Primero deben descargar el paquete que indican en la página, lo pueden descargar de aquí. Una ves lo descarguen, verán los replace de los que les hable.

function emoticonComentario() {

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

bodyText = document.getElementById('comments');

cualTexto = bodyText.innerHTML;

//:) :-) :] :-]
cualTexto = cualTexto.replace(/:\)/g,'');
cualTexto = cualTexto.replace(/:-\)/g,'');
cualTexto = cualTexto.replace(/:\]/g,'');
cualTexto = cualTexto.replace(/:-\]/g,'');

// :'-( :(( :'(
cualTexto = cualTexto.replace(/:'-\(/g,'');
cualTexto = cualTexto.replace(/:\(\(/g,'');
cualTexto = cualTexto.replace(/:'\(/g,'');

.....
bodyText.innerHTML = cualTexto;
}

Yo no uso todos esos emoticones, por lo que elimine las lineas de los que no uso para evitar que se corra tantas veces el replace. luego, para darle control a las partes en las que quiero que se cambien los :) por :) agregue unas cuantas cosas al código.

Primero cree una función que obtuviera los elementos por tag y llamara a la funcion que contendria todos los replace. jeje, sii.. la etiqueta se llama emo :P

function putEmoticons() {
 elements = document.getElementsByTagName('emo');
 for(var i=0;i< elements.length;i++){
  replaceEmoticons(elements[i]);
 }
}

esta función recorre todos los elementos con la etiqueta emo y llama a la función que se encargara de todos los replace, esta sera así, con más replace por su puesto.

function replaceEmoticons(item){

text = item.innerHTML;

// :)
text = text.replace(/:\)/g,'');

item.innerHTML = text;
}

Una vez terminamos con el Javascript, es momento de subirlo al servidor que quieran e importarlo en blogger. Para esto vamos a la edición de plantilla, y antes de hacer cualquier cosa, hacemos una copia de seguridad de nuestra plantilla. PAra esto ingresamoes en la opción de Plantilla y seleccionamos la opción de crear copia de seguridad , la cual esta arriba a la derecha


Ahora que no hay problema con que dañemos algo, podemos modificar con confianza el HTML de la plantilla, para esto ingresamos en la opción de "Edición de HTML" y buscamos /head justo antes de esta etiqueta incluimos la siguiente linea para importar el javascript, en src colocan la url en la que se encuentra el js que subieron. como ejemplo coloco la que yo estoy usando, pero no usen esa por que se arriesgan a que nada les sirva si algún día se me da por borrarla, jeje...:P

...

Ahora colocamos el código que llamara la primera función que se encargara de todo, para esto buscamos /body y antes de esta etiqueta, colocamos las siguientes lineas.

...
  

Ahora para que se cambien las caritas, colocamos el texto que tendrá los emoticones entre tags emo de la siguiente forma

Este es un texto en el que usare una carita... :P

también se puede usar para TODO el texto :D

y ya tendremos nuestras caritas casi automágicamente.