JMiur [E]

Hace unos días, Armando preguntaba si era posible utilizar la técnica de los bloques animados en el elemento Archivos de Blogger.

Como se refiere a un script descripto en esa entrada, pasaré por alto algunos detalles que pueden verse allí y vamos a ir directamente al grano ya que implementar esto es sencillo y debería funcionar en cualquier plantilla y con cualquier tipo de opción que hayamos seleccionado: Jerarquía, Lista o Menú desplegable.

Para usarlo, debemos descargar el archivo animatedcollapse.js y alojarlo en un servidor propio. Luego, insertamos el siguiente código en la plantilla de Blogger, justo antes de la etiqueta </HEAD>:
<script type="text/javascript" src="URL_animatedcollapse.js"></script>
Ahora, vamos a expandir los artilugios de la plantilla y vamos a buscar este código que es donde comienza el elemento archivos:
<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'>
Donde el atributo title podrá ser diferente si es que lo hemos modificado.

Un poco más abajo, siempre dentro de ese elemento buscaremos esto e insertaremos las líneas marcadas en color:
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>

<div class='widget-content'>

<div style=''>
<a href='javascript:losArchivos.slideit()'>EXPANDIR/CONTRAER</a>
</div>

<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>

<script type='text/javascript'>
var losArchivos=new animatedcollapse(&quot;ArchiveList&quot;, 500, false)
</script>

<b:include name='quickedit'/>

</div>

</b:includable>
En el ejemplo, la forma de expandir y contraer es sólo un enlace de texto pero también podría ser una imagen y cualquier personalziación de estilo podemos hacerla dentro del atributo style del DIV.

Ese enlace debe estar arriba del bloque a ocultar que ene este caso, será ArchiveList.

Más abajo, luego de ese bloque, colocaremos la llamada al script en si mismo en la que podemos establecer tres parámetros:

var losArchivos=new animatedcollapse(&quot;ArchiveList&quot;, 500, false)

El primero es el nombre del bloque que en este caso no cambiaremos; el segundo es un valor que indica la duración del efecto y es un valor expresado en milisegundos (1000 = 1 segundo). El tercero es el estado inicial del bloque que puede ser true (inicialmente expandido) o false (inicialmente contraido).

El resultado puede verse en la sidebar de mi blog de pruebas funcionando sobre una plantilla Mínima.

24 comentarios:

Gem@  

Hasta hace poco mi sidebar parecía la feria con tanto desplegar y contraer y decidí dejarla de forma estática pero los archivos se hacen más largos que un días sin pan así que voy a darles otro cambio ;)

Responder
k_nelita  

Supongo que esto mismo podría aplicarse para las etiquetas no? Que esas si que se me hacen laaaaaargas, también el archivo claro... :o

El js ya lo tengo, pero lo que hay que agregar después de expandir, en el caso de las etiquetas que sería?

O sea en este caso el de los archivos para poner una imagen iría en lugar de donde dice EXPANDIR/CONTRAER? Sería url(http...) así?

Responder
JMiur  

Gem@:
Hace poco tu sidebar tenía varios elementos que funcionaban así. Creo que fuiste de las primeras en usar este script :)

Lo de los archivos es como dices, son demasiado largos para quedar a la vista.

k_nelita:
Para las etiquetas sería similar, el mismo criterio pero cambian ciertas cosas. En cualquier caso, el enlace EXPANDIR/CONTRAER va siempre debajo del div:
<div class='widget-content'>
y la llamada al script arriba de:
<b:include name='quickedit'/>

Lo que es importante es saber cuál es el nombre del DIV a ocultar y eso es lo que puede variar.

Como es un enlace, claro, en liugar de EXPANDIR/CONTRAER puede ir una imagen, como cualquier otro enlace.

Responder
k_nelita  

Esperaré ansiosa que pongas cuales son esas "ciertas cosas" que hay que cambiar :D Y lo del div que hay que ocultar, ya publicarás algo al respecto no? :)

Responder
LacraX  

¿Y con algún efecto de Scriptaculous no se podria hacer?

Responder
Gem@  

Así es J.Miur y lo sigo usando en el footer que por cierto resulta muy práctico.

Responder
JMiur  

Intentaré hacer ese post, k_nelita.

LacarX:
Claro que puede usarse, hay que poner el efecto en el enlace y listo. Lo que pasa es que este scrip es bastante anterior y mucho más sencillo para quien no tiene Prototype + Scriptaculous. Con esas librerías, los efectos son múltiples, alguna vez lo usaré total, ya están cargados :)

Gem@:
Habría que llevar un registro de los cambios, los grandes y los pequeños. Las plantilals van mutando constantemente sino, ¿dónde está la gracia? :D

Responder
FalconFix  

Saludos Gran Jmiur, aquel efecto he intentado ponerlas en las etiquetas pero no lo logro, de q manera crees tu q se pueda hacer.

Desde ya muchas gracias amigo y maestro Jmiur.

Responder
JMiur  

FalconFix:
Estoy en eso, tratando de armar un post para mostrarlo.

Responder
Falconfix  

oOk gran Jmiur espero ansioso entonces jeje ;)

Responder
Armando  

Mil Gracias Jmiur por tu ayuda !!!

Un articulo fácil de entender.

Responder
JMiur  

Me alegro que sirviera, Armando :D

Responder
cargohe  

ha una no se por que los numeros me salen es abajo en vez de salirme al lado del las letras y tambien el numero de las etiquetas salen abajo como los pongo al lado ó si no se puede entonces quitarlos, miralo en mi blog.
http://cargohe.blogspot.com/

Responder
JMiur  

Se ven así porque así están definidos:

#sidebar-wrapper li a {
display:block;
............
}

Eso hace que los enlaces de la sidebar que son aprte de una lista, sean bloques, es decir, que se cree un salto de línea.

Lo contrario es display:inline;

Para que no se vea el número, debes buscar y quitar este dato: <data:label.count/>

Responder
cargohe  

Huy Men Gracias, Definitivamente el que no sabe es como el que no ve :D, gracia de nuevo.

Responder
cargohe  

diras que soy canson pero tengo otro problema en los archivos del Blog lo puse que se expandieran y contrajeran y resulta que cuando los espando no me muestra todos lo post del mes, por decir algo son 25 y solo muestra 5 por que se corta esta como restringido.

Responder
JMiur  

Online lo puedo saberlo. Tal vez no pueda adaptarse a la plantilla esa. Parecería que calcula mal la altura.

Responder
k_nelita  

Hola JM, después de mucho tiempo me decidí a hacer esto con el archivo del blog, ya que puse bloques desplegables por varios lados, me faltaba este para el archivo, salió casi todo bien, casi, dije casi... salen unas palabras: losArchivos=new casi no se ve por el fondo negro de la sidebar, pero está allí... y la "imagen" que puse que en realidad es esto ▼ como le puse a los demás desplegables, me sale debajo de la palabra archivo, en los demás dice por ejemplo:"Directorios ▼" y en los archivos el dibujito sale debajo, sabés porqué será?
Por lo demás funciona bien, es mas un problema estético que no logro entender ni solucionar... :S
Ahh... es en Te Propongo...
Tal vez me puedas dar una manito si?

Responder
k_nelita  

Ya solucioné en parte el problema, había repetido parte de la llamada, pero... el ▼ sigue saliendo debajo de Archivo, pero esas palabras ya no salen...

Responder
JMiur  

Sale difernte porque allí hay un título y un enlaces cuando en los otros, por ejemplo en el de arriba que es Mis Visitas, no hay títulos así que, deberías copiar ese mismo modelo que sería algo así:

<a style="text-transform: none; margin: 2px 0px; padding: 10px 0pt; width: 120px; height: 5px; display: block; color: #EDEDED !important; text-align: left; text-decoration: none ! important; font-size: 17px;" href="javascript:collapseknelita.slideit()">Archivo ▼ </a>

Responder
k_nelita  

Y esto que me decís donde lo copio? En la plantilla? En que parte? O en un gadget como tengo los otros?
Pero en un gadget no se como poner el archivo... por eso lo puse así... :S

Responder
JMiur  

Es un gadget. Es igual al que tenés arriba; lo único que cambia es el enlace; en este momento hay uno colocado así que sólo debés modificarlo. Ahora dice:
<a href="javascript:collapseknelita.slideit()"> ▼ </a>

Responder
k_nelita  

No puedo encontrar el sitio para poner ese código... los demás los tengo como gadget en un elemento de página, pero con los archivos no puedo hacer eso mismo, por eso copié el código que das en esta entrada y lo puse dentro de la plantilla, pero eso que me decís no encuentro el sitio dentro de la plantilla para ponerlo :S

Responder
JMiur  

Esto:
<a href="javascript:collapseknelita.slideit()"> ▼ </a>
es algo que has puesto manualmente; no sé si en un widget o directamente en la plantilla; eso no importa; sea como sea, basta que encuentres ese enlace y lo cambies, agregándole el estilo.

El título se puede eliminar eliminando esto de la plantilla, en el elemento que estás editando:
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>

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