JMiur [E]

Una de las posibilidade del JavaScript es que nuestro blog puede tener ciertas características y luego, algún tipo de código las puede cambiar muy rápidamente y sin que esto sea evidente para los visitantes. Un ejemplo típico de esto son los emoticones en los comentarios; alguien escribe cierta combinación de caracteres como :) y una función se encarga de buscarlos y cambiarlos por una imagen sonrisa

Con el mismo criterio y de manera simple, también es posible modificar otro tipo de textos, en realidad, cualquiera.

Supongamos que nos gustaría que en las entradas, cada vez que hacemos referencia a nuestro sitio, en lugar de aparecer un enlace como texto, quisiéramos que se muestre una imagen, alguna clase de logo. Es sencillo de hacer, escribimos el código en la entrada y listo:

...etiam rhoncus iaculis magna ac accumsan sed at dui et eros mollis hendrerit ...
<a href="mi_URL" target="_blank"><img src="mi_LOGO" /></a>
No hay problema pero ... hay que escribirlo ... eso mismo lo podríamos hacer de manera automática y evitarnos el trabajo de recordar el código; para eso, sólo necesitamos de una función cuya estructura elemental sería algo así:
<script type='text/javascript'>
//<![CDATA[
function reemplazaLogos(cual) {
if(!document.getElementById) { return; }
var verificar = "post-" + cual;
bodyText = document.getElementById(verificar);
elTexto = bodyText.innerHTML;
elTexto = elTexto.replace(/PALABRA/g,'CODIGO_HTML');
bodyText.innerHTML = elTexto;
}
//]]>
</script>
¿Qué hará eso? Una vez que las entradas son mostradas, buscará dentro de ellas una PALABRA y la reemplazará por un código HTML que deberemos establecer nosotros.

¿Qué palabra? Cualquiera pero es recomendable que usemos una plabra inventada, algo que podamos recorar con facilidad y que no tenga otro posible uso. Por ejemplo, podría usar MILOGO y hacer que en lugar de verse esa palabra, se viera una imagen que fuera un enlace a mi sitio:
<script type='text/javascript'>
//<![CDATA[
function reemplazaLogos(cual) {
if(!document.getElementById) { return; }
var verificar = "post-" + cual;
bodyText = document.getElementById(verificar);
elTexto = bodyText.innerHTML;
elTexto = elTexto.replace(/MILOGO/g,'<a href="http://misitio.blogspot.com" target="_blank"><img src="URL_imagen" style="vertical-align:text-bottom;" /></a>');
bodyText.innerHTML = elTexto;
}
//]]>
</script>
Coloco entonces eso antes de </head> y me faltaría hacer que se ejecutara. Para que esto funcione sin problemas y sin interferencias, lo que debemos hacer es identificar las entradas de manera precisa, dándoles un ID exclusivo. Expandiendo los artilugios, buscaremos algo así:
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Y reemplazaremos lo indicado por esto:
<div class='post-body' expr:id='&quot;post-&quot; + data:post.id'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<script type='text/javascript'>reemplazaLogos(&#39;<data:post.id/>&#39;);</script>
¿Podría usarse más de una palabra? Sí, bastaría agregar líneas como esta, una debajo de la otra:
elTexto = elTexto.replace(/OTRAPALABRA/g,'CODIGO_HTML');
En este ejemplo online se lo puede ver en funcionamiento.

46 comentarios:

Jared  

Posibilidade S :P sorry..

Responder
Jared  

Excelente solución para algo que buscaba hace tiempo JMiur, muchas gracias.

Responder
BanakaBanaka!!  

Jajaja... mira él... eso me pasa por no darme prisa en publicar... es el mismo truco que utilizo en TodoTwitter para sustituir por logos algunas palabras en los comentarios... Realmente es muy útil y se puede aplicar a la plantilla completa, en los títulos de las entradas, en los de la sidebar, en los comentarios (claro)...

... ay.., cuándo aprenderé a ser más rápido...!!! Que te cuente Rosa (El Escaparate), que ya me pasó algo parecido con ella una vez.... jajajaja!!

Un abrazo!!
★Iván.

Responder
racnarok  

esto era lo que buscaba, pero lo quería para otro uso, intentar implementar BBCODE en blogger xD, ire a probar.

Responder
Gem@  

Si no me equivoco, esto me lo explicaste hace tiempo o será...
(No recuerdo como se le dice a las situaciones que te dan la sensación de haberlas vivido con anterioridad)
De todas formas me lo llevo :D

Responder
Marcos Gabriel  

Haveria como adptar isto para os comentarios e fazer o emoctions ???
(que pegue no IE tb)

Responder
ΜigueŁ jίмenez™  

Valla valla, precisamente lo que necesitaba...lo he encontrado sin buscarlo :), intenté hacerlo con el script de los emoticones pero no me funcionó.

Excelente recurso.

Responder
Dña. Urraca  

Ya lo intentare cuando resuelva otra cosas. De momento pincha AQUI, tengo una cosa para ti, no es el perro ni un geranio, lo juro.

Responder
Pizcos  

Sabes que hace tiempo pense ¿y usarlo para los spammers y los trolls? casi todos usan el mismo lenguaje y podrian llevarse alguna sorpresa al publicar comentarios ☺☺☺

Salu2

Responder
El Carcamal  

JMiur, lo primero darte las gracias por todo lo que estoy aprendiendo desde hace unas semanas en tu magnífico blog. Todo un descubrimiento para mí. Eres mi padrino bloguero :) :)

Si me permites, te haría una consulta. ¿Sería posible utilizar este script para hacer desaparecer, en todas las entradas, "-h" de los enlaces a las imágenes alojadas en Blogger? Es decir, convertir:

href="http://....../s1600-h/la_imagen.jpg
en
href="http://....../s1600/la_imagen.jpg

Por lo que he leído, parece que "-h" convierte la dirección en un enlace a una página y no a la imagen en sí. Eso hace que en esas imágenes no funcionen en ventanas modales como Slimbox v.2, que estoy intentando implementar. Sin "-h" funciona perfectamente, pero es un coñazo eliminarlo de todas las entradas. Creo haber leído en alguna de tus entradas que también da problemas con Lightwindow.

Lo he intentado con:
elTexto = elTexto.replace(/-h\//,"\/"); pero no me funciona.
Lo que está entre paréntesis lo he sacado de un Slimbox v.1 modificado que ya tengo implementado y que funciona perfectamente.

Perdón por el rollo, y gracias anticipadas.

Responder
JMiur  

¿Un deja vu, Gem@? Creo que incluso lo habias aplicado en algo pero no estoy seguro.

Es igual que los emoticones, en IE funciona perfectamente, Marcos Gabriel por lo menos en IE7 y 8; son instrucciones de JavaScript standard.

Pizcos:
Es una idea excelente !!!!!!!!!!!!! :D Me encantaría verlo funcionando XD

El Carcamal:
Sí, puede hacerse. Probé con algo así y funciona:

elTexto = elTexto.replace(/s1600-h/g,'s1600');

El enlace cambiará, eso lo puedes en el código fuentoe pero no se si funcionará la ventana modal.

Responder
Gem@  

Esa es la palabra un ¡Déjà vu!
Pero llevas razón me lo explicaste hace muchoooo tiempo lo apliqué en alguna entrada y luego me olvidé.
A veces tendría que recrearme en leer mi propio blog, hay cosas que digo ¡mira esto y yo buscando por ahí!

Responder
Javi Melaza  

Ufff... esto es un palo y se ve Afuego Melaza.

Saludos.

Responder
JMiur  

Pues, a mi me me pasa lo mismo :D

Responder
racnarok  

no me funciona, ni siquira pegando el mismo ejemplo que pones en la entrada (y si, ya agregue una url de imagen valida para la prueba).

Responder
Enrique Pellecer  

Que sabes del error de blogger que dice El servidor API de Google Maps ha rechazado tu solicitud. El parámetro "sensor" especificado en la solicitud debe estar definido en "true" o "false" al crear un post, sera que ese mismo error esta haciendo que mi blog se esta comportando de manera extraña al momento de estar cambiando las plantillas. Porque cuando cambio de plantilla, aparecen widgets que ya habia borrado, sera widgets fantasmas por halloween.

Responder
José GDF  

Algo parecido podría sustituir el nick de los comentaristas más habituales por su avatar...

Pero sería muy complicado. Estuve dándole vueltas al tema hasta hace poco, que aparecieron los avatares ellos solitos... Para luego ir como les da la gana, claro... :(

Responder
JMiur  

racnarok:
Fíjate otra vez porque había un error en la transcripción de un script. Debe decir:
function reemplazaLogos(cual)

Enrique Pellecer:
Ese es un error del Editor de de Blogger Draft. No parece afectar las entradas, sólo molesta el cartel que aparece varias veces. Nada se puede hacer salvo esperar que lo arreglen o usar el editor de Blogger clásico o el mejorado porque allí no está esa parte de los mapas.

José GDF:
Sí eso también es posible aunque sería más fácil detectarlos de otro modo como se hacía antes con los comentarios del propio administrador.
Esperemos que arreglen esto de una vez :D

Responder
El Carcamal  

JMiur: no funcionan las ventanas modales con el asunto del "-h". Y creo entender porqué no funciona.
El script sólo reinterpreta el código según las instrucciónes dadas. Lo que yo necesito es algo que sustituya (reescriba) lo que hay escrito en las entradas.
Si conoces alguna forma de hacerlo, te quedaría muy agradecido. Creo que las posibilidades que se abrirían serían muchas (correcciones, cambios de códigos HTML, alineaciones de imágenes...).

Gracias por tu interés.

Responder
JMiur  

El Carcamal:

No entiendo que quieres decir con "interpretar" o "re-escribir" o cuál es la diferencia. Lo único que podemos usar en Blogger es JavaScript y este lenguaje lo ejecuta el navegador por lo tanto este tipo de técnica, lo que hace es modificar el DOM de la página. Distinto es el caso de PHP que se ejecuta en el servidor, antes de crear la página.

En ese sentido, JavaScript re-escribe el codígo. Lo que ocurre es que, en este caso, más que cambiar el texto lo que debería hacerse es cambiar el atributo HREF y eso requiere otro proceso, similar pero levemente diferente.

En esta entrada de prueba he colocado un ejemplo que usa un script modelo y que he colocado al final de la página.

Lo que hace es leer un elemento (en este caso los posts) y buscar los enlaces. Cuando encuentra uno cuyo HREF posee s1600-h lo cambia por s1600.

Con LightWindow, verás que funciona; no sé con otro tipo de ventana modal ya que dependerá de cuando el script de esas ventanas lee los enlaces. En general, lo hacen al terminar de cargarse la página así que también debería funcionar.

Responder
racnarok  

Agregastes un ;) demas en
<script type='text/javascript'>reemplazaLogos('<data:post.id/>'););</script>

la forma corregida seria ai
<script type='text/javascript'>reemplazaLogos('<data:post.id/>');</script>

Y ya con eso no lo jodo más xD

Por cierto, esto ni lo publique como comentario, solo es a modo de observación para usted.

Responder
JMiur  

Sí, así es, todo parece haber sido parte del mismo error de transcripción que te comenté antes. Un maldito signo < que se coló pero creo que ahora ya está bien ... espero.

Responder
Elizabetha Souvre  

ME ENCANTA!!!!!

Lo probare!!!

Siempre tan ingfgenioso, Maestro ;) ;) ;) !!!

=)

LIZ

Responder
Elizabetha Souvre  

Otra pegunta, :O :O :O que tambien le hice a Gemm@ ¿porque algunas imagenes de perfil se ven y otras no? :O :O :O...yo extraño las imagenes de perfil, pero pense que no habíaa forma de hacerlas volver ...¿que sucede?

sauludos y cuidese

=)

LIZ

Responder
El Carcamal  

JMiur:
Ayer mandé un comentario, pero parece que no llegó. Sólo decirte que el script que pusiste por el tema de "-h" funciona perfectamente.

Mil gracias, y perdona mi ignorancia de novatillo.

Responder
JMiur  

Elizabetha: Buena pregunta pero, no sé. Es un error de Blogger que ya dura mucho tiempo.

El Carcamal: Eso suele pasar con frecuencia :) Me alegra que funcionara el ejemplo.

Responder
Cristian  

mmm...soy al unico que no le funciona? hice todo tal cual está en el post, coloque el script antes de head, identifique las entradas dándoles un ID exclusivo y coloque la llamada de la función..¿Qué es lo que hice mal? Creo que debe ser la llamada del script que no me la reconoce..

Responder
JMiur  

Cristian: ¿Hay un ejemplo donde pueda verse?

Responder
Cristian  

Si JMiur en éste post

Responder
JMiur  

Cristian:

Parecería que hay un paréntesis que sobra. Revisa que diga:

<script type='text/javascript'>
reemplazaLogos(&#39;<data:post.id/>&#39;);
</script>

Responder
Cristian  

este script solo se ejecuta en los posts?

Responder
JMiur  

Tal como está, si. Para hacer que funcione en otros sectores, debes modificar el script.

Responder
Cristian  

que debo colocarle al script para que se ejecute en los posts y en los comentarios?

Responder
JMiur  

No hay nada que agregarle, habría que modificarla completamente.

Responder
Karla  

Hola Sr. J Miur,

Ya había venido antes a su blog, esta buenísimo,;) felicidades!, solo qu no memoricé su nombre "J Miur", y ahora que recuerdo usted gentilmente vió mi blog a petición de Gema cuando tuve problemas con google, al suspenderse mi cuenta por error,...cuando ella me dijo:- "J. Miur piensa que fue error", no supe que era usted.
...Ahora me cae el 20 (como decimos en mi país),... sorry andaba en las nubes con mi problema :S.

Pero nunca es tarde para dar las Gracias por haberse tomado el tiempo de ver y comentar mi situación.;)

Muchísimas Gracias Sr!;)

...Gracias por esta entrada me gusto mucho y la pondré en práctica en mi blog al cual es bienvenido Sr. ;).

~Karla~

Responder
JMiur  

Gracias por el comentario, Karla; me alegra que se haya solucionado tu problema :)

Responder
Karla  

Hola Sr. JMiur

No me quería quedar con las ganas y trate de implementar esto, pero no me funciona :(


Hay algún problema?

Muchas Gracias!!!

Responder
JMiur  

Karla:
Deberías decirme qué has hecho y si es posible verlo online.

Responder
Karla  

Hola Sr. JMiur

Lo que me interesa hacer es sustituir las imágenes por palabras que constantemente uso en mi blog de CoMpArTiDiSiMo si vé mi último post, verá algunas imágenes que deseo incorporar..., es muy tardado tener que agregar el enlace para cada imagen :S

La prueba la hice en:
Blog de pruebas
, en el único post que tengo (!)se supone que donde dice: "PASOA" debería aparecer la imagen de "paso 1".

:)Gracias por su tiempo el cual valoro mucho!

;) Agregué un enlace de su blog al mío.

Hasta Luego!

Responder
JMiur  

Karla:
No coloques el script en una sola línea, que quede tal como muestra el post:

<script type='text/javascript'>
//<![CDATA[
function reemplazaLogos(cual) {
if(!document.getElementById) { return; }
var verificar = "post-" + cual;
.....................
}
//]]>
</script>

Responder
JULIO CESAR  

Jmiur, abra alguna manera de que también se pueda reemplazar la palabra por una imagen en todo el blog y no solo el las entradas. Me gustaría mucho que me ayudaras.

Responder
JMiur  

Podrías ponerle un ID a la etiqueta BODY:
<body id="miblog">
y luego llamar a una función al final de la página, antes de </body>

function reemplazaLogos() {
if(!document.getElementById) { return; }
bodyText = document.getElementById('miblog');
elTexto = bodyText.innerHTML;
elTexto = elTexto.replace(/PALABRA/g,'CODIGO_HTML');
bodyText.innerHTML = elTexto;
}

Pero, no es algo que te aconseje hacer, el resultado podría sr cualquier cosa, podrían cambiarse códigos que no deben cambairse y además, una gran aprte del body no es dinámico por lo tanto, es un desperdicio de tiempo. Si lo que quieres es que se cambien textos en otras secciones, crea funciones similares para cada una de ellas. No es algo con lo que deba abusarse.

Responder
Manuel García  

Hola, ¿esto distingue entre mayúsculas y minúsculas?

Responder
JMiur  

Javascript es sensible a mayúsculas y minúsculas por lo tanto sí, las distingue.

Responder
Manuel García  

JMiur, lo he probado, pero se me desestructura el post, los margenes de los lados desaparecen :S

Responder
Manuel García  

Ya lo solucioné,gracias de todos modos :)

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR