Emoticones en Blogger, Parte 2

Este post viene de Como poner Emoticones en Blogger

En esta segunda parte del post de Como poner Emoticones en Blogger explicare el funcionamiento del Script así aprenderás a editarlo tu mismo y podrás poner tus propios emoticones y también podrás editar los símbolos para poner los emoticones.

Desde donde se ejecuta el Script:

Si te fijas en el Código del Script(clic para ver) todo el código esta escrito entre estos tags:

<script type='text/javascript'> 

//<![CDATA[ 

//]]> 

</script>

Esos tags nos permiten escribir cualquier script dentro del blog, esto hace que el script se ejecute directamente desde el mismo blog, la gran ventaja de escribirlo adentro del blog es que así no alojas el script en otro servidor y no estas sujeto a que si se cae el servidor o si tiene problemas de trafico y se pone lento no afectara la carga de tu blog o en peor de los casos eliminan el script, ya no tendrás acceso a el, en pocas palabras, no dependes de ninguna otra web.

Guardar los Emoticones y alojarlos tu propio servidor de imágenes:

Bien, ahora si quieres depender 100% de ti mismo lo que debes hacer es guardar los emoticones y subirlos a tu propio servidor de imágenes.

Puedes guardar todos los emoticones dándoles clic derecho y guardarlos en tu PC para luego así subirlos a tu servidor de imágenes favorito, todos los emoticones son estos:

Luego de que ya subiste los emoticones a tu propio servidor puedes substituir la url de cada emoticón del script por la url de tus emoticones.

Fíjate en el script, comprende varias líneas como esta:

d[i].innerHTML = d[i].innerHTML.replace(/\:\-\)/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon0.gif" style="border:0; margin:0; padding:0;" id="new" /> ');

en esa parte debes cambiar la url del emoticón:

http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon0.gif

por tu propia url.

Como editar los símbolos para poner los Emoticones:

Para poder editar los símbolos de los emoticones debemos aprender un poquito de javascript y de la sintaxis del script, no es tan difícil como parece, fíjate la sintaxis básica es esta:

d[i].innerHTML = d[i].innerHTML.replace(/\:\-\)/gi, ' <img src="http://dir-de-tu-emoticon.gif" /> ');

la funcion .replace funciona de la siguiente manera:

.replace(cadena a buscar, cadena a reemplazar);

la cadena a buscar:

debe ser escrita entre dos plecas / / in clinadas a la derecha, por ejemplo si quisiera buscar la palabra gato y reemplazarla por la palabra perro tendría que escribir asi:

.replace(/gato/, "perro" );

la cadena a buscar tiene dos atributos la g(de global) y la i(de incase-sensitive)

si dejamos solo /gato/

entonces solo se substituirá la primera palabra gato en todo el texto

si escribimos /gato/g

quiere decir que se substituirán todas las palabras gato encontradas en el texto

si escribimos /gato/i

quiere decir que se buscaran todas las palabras gato y no importara si tienen mayúsculas o minusculas, de ahí "incase-sensitive" que seria algo como "no sensible a mayúsculas".

En este caso si se encuentraran estas tres palagras: Gato, gato, gAto

pues se substituirían todas ya que no importa las mayúsculas al contrario del caso de /gato/g en el que la similitud debe ser exacta al igual que la coincidencia de mayusculas y minusculas.

Ahora bien ya que aprendimos un poco a como utilizar vamos a aplicarlo directamente al código de los emoticones:

fijate en esta linea:

d[i].innerHTML = d[i].innerHTML.replace(/\:\-\)/gi, ' <img src="http://dir-de-tu-emoticon.gif" /> ');

en medio del / /gi hay un montón de símbolos raros, esto se debe a que si en la cadena a reemplazar hay símbolos que no son letras hay que especificarlos poniéndoles antes una pleca inclinada a la izquierda "\"

fijate bien en el ejemplo:

/\:\-\)/gi

si eliminas todas las \ en medio te quedara el símbolo del emoticón = : - )

así pues si en el caso de este emoticón = : - D

/\:\-D/gi

Fíjate que antes de la "D" no hay una "\" por que la "D" no es un símbolo.

También recuerda que la "i" en el / /i hace que sea insensitivo a las mayúsculas, eso quiere decir que no importa si se escribe

: - D o si se escribe : - d

con la "D" mayúscula o minúscula, siempre será reemplazado por la <img src="" /> del emoticón

Edita los símbolos de los emoticones por los que tu quieras

Ahora bien tu puedes editar los símbolos de los emoticones por lo que tu quieras, puedes simplificar los símbolos

de esto /\:\-\)/gi que es igual a : - )

a esto /\:\)/gi que es igual a : )

Podrías intentar simplificarlos de esa manera aunque en realidad yo deje el script de manera que los símbolos sean un poco mas complejos porque recuerda que dentro del código HTML de cada post hay símbolos que pueden llegar a ser muy parecidos a los símbolos de los emoticones y podrías llegar a tener problemas por ejemplo que en alguna parte del código de una imagen o de algún video que pongas en el blog te salga una sorpresiva carita feliz en vez del video o la imagen

Recuerda también que hay muchas otras formas de simbolizar los emoticones, no solo con esa clase de símbolos, también puedes ponerlos de esta manera

a esto /\:feliz\:/gi de esa forma cada vez que es cribas :feliz: entre los dos puntos será sustituido por el emoticón, tienes un montón de variantes que puedes aplicar, ahora todo depende de tu imaginación.

Para terminar una breve aclaración:

Fíjate en esta imagen, todo lo que esta en rojo debe ser igual la parte de arriba que la parte de abajo

La parte de arriba en azul corresponde al 'post-body' que serian todos los elementos del cuerpo del post

La parte de abajo en verde corresponde al 'comment-body' que son todos los elementos del cuerpo de los comentarios

la razón de que tiene que ser igual lo que esta en rojo es quizá un poco obvia pero: porque asi sean los mismos emoticones y códigos para cuando escribes un post que para cuando se escriben en el comentario

Bueno espero sea de utilidad todo esto que escribí porque me tomo un poquito de tiempo, también espero haberme dado a entender lo mejor posible... 

...Si alguien tiene alguna duda pues comenten que intentare resolverlas lo mejor posible, bueno nos vemos hasta la próxima, hahaha