JMiur [E]

Este hack es viejo; lo vi por primera vez cuando Gabriel lo intentaba implementar en Café de por medio. Recuerdo sus comentarios respecto a lo dificultoso que le había resultado ya que no conseguía respuestas. Se trata de un truco llamado AJAX Labels y que permite que mostremos un extracto de los posts al hacer click en un enlace con una etiqueta sin salir de la página.

No parece estar implementado en muchos sitios y una de las razones es que el script no es accesible ya que lo han alojado en Google Pages y los problemas del ancho de banda hacen que no funcione; otra posible razón es que está en inglés y las explicaciones no son nada claras. Desde la página de origen puede incluirse como widget directamente en la sidebar pero, como los archivos no se cargan, el resultado es frustrante.

En realidad, implementarlo es sencillo y la clave, como casi siempre, termina reduciéndose a definir las propiedades CSS.

Para utilizarlo, necesitamos prototype así que si no lo tenemos incluido en el blog, lo descargamos y lo agregamos a la plantilla. Lo mismo haremos con el script en si mismo. Todo eso está incluido en este ZIP que contiene tres archivos:

prototype.js
ajaxCategorias.js (el script traducido al español)
rssIcon.png (la imagen está alojada en ImageShack)

Como siempre, alojamos prototype.js y ajaxCategorias.js en un servidor externo como Google Pages o el que nos resulte cómodo y luego, justo antes de </head> escribimos:
<script type='text/javascript' src='URL_prototype.js'></script>
<script type='text/javascript' src='URL_ajaxCategorias.js'></script>
A esto le faltarían las propiedades de estilo. La mayoría de estas son muy personales y dependerán de la plantilla que usemos pero, de manera elemental serían las siguientes:
<style type='text/css'>
#cargadorLabels { /* bloque que muestra texto de carga */
margin: 0;
padding: 20px 0;
text-align: center;
z-index: 1000;
}
#bloqueLabels { /* el bloque que contiene todo el hack */
border: 1px solid #unColor;
font-size: 11px;
padding: 10px;
margin: 0;
}
.encabezadoLabels { /* el título del bloque */
background-color: #unColor; 
border: 1px solid #unColor;
padding: 4px 10px;
text-align: right;
}
.encabezadoLabels a { /* el enlace para suscribirse */
[agregar propiedades personales]
}
.tituloLabels { /* el título de cada post mostrado */
margin: 15px 0 0 0;
[agregar propiedades personales]
}
.tituloLabels a { /* el enlace de cada post mostrado */
[agregar propiedades personales]
}
.contenidoLabels { /* el extracto de cada post mostrado */
[agregar propiedades personales]
}
.cerrarLabels { /* la barra final para cerrar la ventana */
background-color: #unColor; 
border: 1px solid #unColor;
cursor: pointer;
margin: 20px 0 10px 0;
padding: 4px 10px 0 0;
text-align: right;
}
</style>
Una vez que tenemos todo esto, nos falta hacer que funcione diablo2

Primero que nada, debemos agregar dos bloques DIVs; uno será el que contenga la advertencia de carga y el otro será donde se mostrarán los posts extractados. Pero ... ¿DONDE? La respuesta rápida es "donde se nos ocurra", exactamente donde quisiéramos que se mostrara ese resumen.

Lo más sencillo, para empezar, es colocar arriba, justo encima de los posts:
<div id='main-wrapper'>

<div id='cargadorLabels' style='display: none;'>CARGANDO</div>
<div id='bloqueLabels' style='display:none'> </div> <b:section class='main' id='main' showaddelement='no'>
Como la idea es que al hacer click en las etiquetas se ejecute el truco, necesitamos modificar la parte de la plantilla que las contienen y otra vez, aparecen variantes ya que hay dos sectores del blog que las muestran; por lo general, debajo de los posts y en el elemento Etiquetas de la sidebar.

Ya que Blogger nos permite agregar tantos elementos Etiquetas como nos de la gana, lo ideal es crear uno nuevo para no interferir con los que ya tenemos así que vamos a Elementos de la página y agregamos un nuevo elemento Etiqueta; le ponemos un título para reconocerlo y lo guardamos. Volvemos a la Edición HTML de la plantilla y, expandiendo los artilugios, lo buscamos.

Nos mostrará un código como este:
<b:widget id='LabelX' locked='false' title='elNOMBRE' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span dir='ltr'><data:label.name/></span>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Allí, reemplazaremos el enlace marcado por lo siguiente:
<a href='#bloqueLabels'
expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"'>
<data:label.name/>
</a>
Guardamos la plantilla y listo. Cuando hagamos click en uno de esos enlaces, se desplegará el bloque en la parte superior de la ventana, mostrando un resumen de cinco posts con esa etiqueta.

Hasta acá no debería haber problemas salvo los que se refieren a ajustes gráficos pero, la idea puede ampliarse un poco.

Muchos usamos una nube de etiquetas en lugar de una lista ¿es posible hacer que esa nube utilice el scipt? Sí, es posible y eso será motivo de otro post; por eso, sugiero agregar un elemento nuevo para probar y de esa forma, no interferir con lo que tenemos.

¿Y por qué no lo estoy usando? Porque me ha parecido más interesante implementarlo en los mismos posts ya que, como dije antes, debajo de cada uno de ellos se muestran las etiquetas.

Aquí, entonces, nos encontramos con un problema ya que el blog se muestra de dos modos diferentes, uno cuando estamos en una página individual y otro cuando estamos en cualquier otro punto. En el primer caso, sólo se muestra un post, en el segundo, un número variable de posts, uno debajo del otro así que, en ese caso, no podría mostrarse debajo de cada uno de ellos.

La idea sería que, si estamos en una página individual, el bloque se muestre debajo de este y si estamos en otro tipo de página, se muestre en la parte superior y nos posicione allí, sin importar donde nos encontremos.

Para esto, usamos los códigos condicionales y colocamos un bloque tal como en el primer ejemplo, justo arriba de los posts pero le diremos a la plantilla que sólo lo agregue cuando NO estemos en una página individual:
<div id='main-wrapper'>

<b:if cond='data:blog.pageType != "item"'>
<div id='cargadorLabels' style='display: none;'>CARGANDO</div>
<div id='bloqueLabels' style='display:none'> </div>
</b:if>

<b:section class='main' id='main' showaddelement='no'>
Y haremos lo mismo en alguna parte del footer de los posts, ese lugar dependerá mucho de la plantilla de cada uno; probablemente, antes de:

<p class='post-footer-line post-footer-line-3'>

Agregamos lo mismo pero, indicando lo contrario, que ese bloque sólo se cree cuando estemos en una página individual:
<div id='main-wrapper'>

<b:if cond='data:blog.pageType == "item"'>
<div id='cargadorLabels' style='display: none;'>CARGANDO</div>
<div id='bloqueLabels' style='display:none'> </div>
</b:if>

<b:section class='main' id='main' showaddelement='no'>
Ahora buscaremos los enlaces de las etiquetas:
<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/>;
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</p>
Y, otra vez, lo único que necesitamos cambiar es el enlace pero también le daremos dos alternativas; si estamos en una página individual, se abrirá debajo pero, si estamos en otro tipo de página, se abrirá arriba y nos posicionará allí:
<b:if cond='data:blog.pageType == "item"'>
<a href='#bloqueLabels' rel='tag'
expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"' >
<data:label.name/>
</a>
<b:else/>
<a href='#bloqueLabels'
expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null),scroll(0,0)"' >
<data:label.name/>
</a>
</b:if>
Y ahora sí, creo que ya es todo sonrisa

19 comentarios:

Markos  

¿Cómo lo haces? Me refiero a lo de ser tan bueno x)

Este hack levaba ya un tiempo buscándolo y quedaba de una manera que no me gustaba , y creo que encontraste la solución a mi prbolema ;)

Espléndido

Responder
La Blogueria  

¡Fantástico! me encanta. Gracias mil por ponerlo a mi alcance :D !

Responder
La Blogueria  

Acabo de ver el blog de pruebas, y vuelvo para decirte que, de repente, se me hace indispensable el poder aplicar este hack a la NUBE. Uso el hack de Phydeaux (me parece que como tú). Aunque como siempre lo intentaré yo misma, ya te recuerdo de antemano que lo prometido es deuda :D y espero ansiosamente el post :D :D :D

¡GRACIAS!

Responder
JMiur  

Markos, la verdad, me costó mucho pero, por fin está listo, creo que es útil.

La Blogueria:
En eso estoy, veremos que resulta :D

Responder
paola monti  

JMiur...
excelente como siempre!!... lo estoy probando y funciona estupendo, una única duda ¿se le puede quitar ese flash amarillento cuando pasa de una carga a otra?, es que no luce muy atractivo...

besos.

Responder
JMiur  

Me encantaría, Paola pero, no tengo la menor idea de por qué se produce, he intentado varias cosas y sigue allí :)

Responder
paola monti  

estaré atenta por si lo descubres, que no me cabe duda lo harás...

saludos y gracias.

Responder
Quique  

eres un genio! acabo de aplicarlo y me funciona en la pagina general pero en mismo post las etiquetas solo me muestran la misma entrada expandida al maximo, no me salen otros resultados. sabes a que puede ser debido?

Responder
Quique  

nada! no me hagas caso! tenia el titulo en blanco y me estaba volviendo loco! ya esta! saludos!

Responder
JMiur  

Jajajaja, son cosas que pasan, me alegro que se haya solucionado :)

Responder
Juanchi  

:( a mi no me funciona :( ... Que podra ser? coloque los scripts con los Styles que dijiste modificados... Y despues reemplase los links en la plantilla expandida y bueno... a la hora de hacer click no se me abre ninguna ventana... lo que si (y calculo q es buena señal) el link parecia funcionar... pq arriba la direccion html se cambia a #label..
y si estoy en un post casi en el final de mi blog... al tocar el link de las etiquetas me lleva a lo que seria el Main... pero no se despliega el menu como a vos :S:S

Responder
Jose, a secas  

JMiur, como se dice por donde vivo: ¡Eres el puto amo!

Felicidades porque haces que todo parezca facil y, además, obtengamos un resultado espectacular.

Un saludo.

P.D.: Pasate por aquí.

Responder
JMiur  

Juanchi, necesitaría verlo online para poder fijarme. Sin duda es un pequeño error de sintaxis en alguna parte.

Gracias, José, pasaré a mirar :D

Responder
Juanchii  

http://juanchingoprueba.blogspot.com/ ese el el blog de prueba q cree hoy a ver si podia hacerlo funcionar ... tome prestado un script tuyo y el de ajax de un amigo para probar si mis enlaces a los mismos estaban fallando pero veo que mi problema sigue = :S ..Ha y para hacerlo mas facil cambie el link a las etiquetas de la sidebar no en el final de los post (para probar si andaba nomas)... Bueno espero tu diagnostico jajaja Muchas gracias

Responder
JMiur  

Juanchi:
El problema es que no se cargan los scripts porque estás usando los mios y hay un exceso en el ancho de banda. Deberías alojarlos en un servidor tuyo. Crea una cuenta en Google Pages y súbelos allí. El resto, parece estar bien.

Responder
HaCk CrAcK  

Como hago para poner esa opcion de ir arriba en el post?

Responder
JMiur  

Fíjate en este post

Responder
oslore  

hola me gustaria saber como hago para personalizar el formulario de comentarios como hiciste este, y quede siempre visible. gracias

Responder
JMiur  

Fíjate en este post.

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