Emoticonos para tu blog...

... que le darán algo más de vida ^^. Bien, en esta entrada voy a tratar de explicar el "como" de uno de los numerosos códigos que podemos usar para compatibilizar emoticonos con nuestro blog (en las entradas y comentarios de usuarios). Quizá mas adelante haga una entrada dedicada al "porque"... Según me salga de donde todos sabemos :xino:

Antes de nada un poco de música :-)... que la entrada es larga y la noche joven :fuma:

Si lo que buscabas era copiar/pegar, punto y final... Te recomiendo encarecidamente que consultes al amigo Google (o el buscador preferido, a excepción de guarrisearch y similares), ya que aquí nos vamos a enrollar cual persiana de un seven eleven doblando turno...

Lo primero que debemos aprender cuando queremos modificar algo es que, seamos novatos o "pofesionales", incluso si eres como yo (cosa que dudo, pues soy único en mi/vuestra especie), siempre hay que tener una copia de respaldo del contenido a alterar, ya que un fallo en el proceso, por tonto que parezca, puede mandar a la mierda provocar errores en el resultado.

Lo segundo es que, ante CUALQUIER duda que pueda surgir, probablemente exista una solución, solo hay que saber pedir ayuda. En este pergamino antiguo se recogen anotaciones ancestrales que, aun hoy, son completamente necesarias para obtener respuestas claras, rápidas y concisas.

Bueno, dicho esto vamos a lo que vamos... Modificar nuestra plantilla en un blog para mostrar emoticonos.

Para esta labor sería estupendo que tuviésemos nociones básicas de html/javascript, pero como no las tendremos (ya lo dije en la segunda entrada)

"... la mayoría de los que leerán este blog sois unos incultos de narices tienen nulos/escasos o pocos conocimientos de la materia"...

intentaré explicar todos los pasos/puntos que expongo o en su defecto, sugeriros como encontrar la solución. :ein:

Lo primero necesitamos tener los emoticonos ya cargados en Internet, bien sea en un espacio web, imageshack o cualquier otro lugar, lo importante es tener una URL completa de la imagen. Hay un sin fin de tutoriales por Internet, así que no entraremos en detalles para esto... Si no sabéis como hacerlo, preguntad a Google o sucedáneos "como subir una imagen a internet".

Conviene que las imágenes no sean demasiado grandes ya que, recordemos, son emoticonos, no ilustraciones a pantalla completa ^^ .

A continuación, como dije al principio, vamos sacar una copia de seguridad de nuestra plantilla actual. Para ello iremos a la sección "Diseño - Edición de HTML" y click en el vinculo "Descargar plantilla completa" (en blogger, para otros tipos de blog consultad su ayuda o buscaros la vida vagos/as/es). Guardamos este fichero, que usaremos tanto para añadir nuestro código (previa copia del mismo) como para restaurarlo en caso de error.

Ahora vamos a ver el código que, con ligeras modificaciones, será incluido en la plantilla que hemos descargado y nos mostrará nuestros emoticonos personalizados.

Descargamos este fichero y lo abrimos con nuestro editor de textos preferido. En mi caso uso Ultraedit, aunque existen alternativas gratuitas como Notepad++ (recomendado si no tienes ninguno), si bien podemos usar el bloc de notas de Güindous o gEdit/KWrite en Linus... a gustos colores, el caso es abrir el fichero con un editor de texto*.
* : No confundir un editor de texto con un procesador de texto. En el primero editamos únicamente el texto sin aplicar formatos, florituras, imágenes... El segundo si permite estas opciones, pero no guardará correctamente nuestro fichero para el uso que queremos darle.

Al abrirlo encontraremos un montón de código que, a primera vista, puede resultar un tanto xino... Tranquilos/as/es, está todo colocado y aquí vamos a ver lo que debemos tocar, el resto se quedará tal cual viene.

Más música para continuar...

Localizamos la línea 25, o si no estamos usando un editor como yo mande... la línea:

  /* Seccion a modificar para emoticonos en las entradas */

y justo a continuación, encontramos los apartados que debemos modificar según el siguiente esquema.

En verde lo que CAMBIREMOS, el resto quedará igual que el original:

entrada[i].innerHTML = entrada[i].innerHTML.replace(/textoareconocer/gi, ' <img src="http://direcciondenuestroemoticono.com/emoticono.gif" style="border:0; margin:0; padding:0;" id="emoticonete" /> ');

La primera parte a modificar es donde pondremos el "textoareconocer" que será reemplazado por la imagen, que incluiremos en la segunda parte a modificar.

El script reconocerá cualquier palabra que incluyamos, pero... ¿y si queremos que nos reconozca "signos de puntuación" como :, ( o )?. Para ello, tendremos que preceder cada "signo" con una barra inversa \, la que aparece mediante la combinación "Alt Gr+º". Por ejemplo:

- Para mostrar un emoticono con : ) (sin espacios) pondremos en el texto a reconocer \:\)

- Para mostrar un emoticono con > . < (sin espacios) pondremos en el texto a reconocer \>\.\<

A tener en cuenta que, si queremos mezclar signos de puntuación con caracteres comunes, no usaremos la barra inversa delante de estos últimos...

- Para mostrar un emoticono con :sinbarritahastaaqui: pondremos en el texto a reconocer \:sinbarritahastaaqui\:

En el fichero que habéis descargado vienen predefinidas un par de opciones y una docena de lineas adicionales, pero podéis agregar tantas lineas como queráis, así como eliminar las que sobren... Siempre y cuando estén antes de

/* Fin del primer bloque a modificar, emoticonos en las entradas */

La segunda parte a modificar no tiene mucho lío, únicamente ponemos la dirección del emoticono que queremos mostrar en lugar del código de la primera parte. Simplemente apuntar que debe ser la dirección completa, no sirven enlaces cortos y/o códigos para insertar (tipo imageshack). Simplemente http://ladireccion.es/carpeta/tuimagen.gif.

Este fragmento comentado sirve para los emoticonos en las entradas de nuestro blog, el texto que redactamos los/as/es "autores/as/os". Para que también aparezcan emoticonos en la sección de "Comentarios" simplemente realizaremos los mismos pasos en el bloque siguiente, a partir de la línea 46 o lo que es lo mismo:

/* Sección a modificar para emoticonos en los comentarios */
comentario[i].innerHTML = comentario[i].innerHTML.replace(/textoareconocer/gi...
/* Fin del segundo bloque a modificar, emoticonos en los comentarios */

Siguiendo el mismo patrón que expuse arriba.

Vamos, que ya queda muy poco...

Una vez terminemos, guardamos el archivo resultante (recomiendo no hacerlo encima del original, pues nunca se sabe cuando volveremos a necesitarlo) y procedemos a incluir el virus código en nuestra plantilla, que posteriormente cargaremos en nuestro blog.

Ahora abrimos el archivo que descargamos al inicio de este bodrio tutorial y buscamos la linea </head> , e insertamos el código del archivo que acabamos de modificar justo antes de la misma. De modo que nos quede algo así:

...
addLoadEvent(sonrisas);
//]]>
</script>
<!-- Final del Script para mostrar emoticonos en entradas y comentarios -->
</head>
...

Salvamos los cambios (igual que antes, en un archivo a parte para no sobreescribir el nuestro) y subimos el fichero nuevo desde la sección "Diseño - Edición de HTML", haciendo click en "Seleccionar archivo" y una vez cargado, en "Subir".

Si todo fue bien, a partir de este momento todas las coincidencias de nuestras entradas/comentarios con los "códigos de reemplazo" que insertamos pasarán a ser emoticonos :fuma: (si no es así, repite el proceso nuevamente, compruébalo una tercera vez...)


También puedes usarlo para "censurar" determinadas palabras en tu blog, solo hay que poner un poco de imaginación... ;) .

No puedo citar fuentes ya que el código que he incluido es el resultado de consultar unos y otros, tocado aquí y allí... por lo que diré que la fuente es Google y mi "intuición". Como anécdota comentaré que en muchos de los resultados encontrados, todos asumían la autoria del código en cuestión (parecido a este o totalmente distinto), imposibilitando así cualquier referencia al verdadero autor/a original.

Así mismo todos los que encontré respecto a este tema incluían un código adicional para, en el caso de los comentarios, agregar una "tabla" en la parte superior de estos con la leyenda de los emoticonos, pero con funcionalidad nula... puesto que al final el usuario tiene que escribir igualmente los códigos a mano.

Yo no incluiré dicha modificación por que me gusta hacer las cosas bien, y prefiero una tabla en la que podamos hacer "click" en los emoticonos para que estos se incluyan directamente en nuestro texto. En breve lo añadiré al rincón y obviamente, una entrada explicando como implementarlo en donde vosotros queráis.