Expandir/contraer gadget de Archivos con efecto deslizante


Habíamos visto como expander y contraer partes de la sidebar para ahorrar espacio; ahora vamos a ver algo similar, pero usando dos librerías de Google API : Prototype y Scriptaculous, que nos permitirá expander y contraer nuestros gadgets con un efecto deslizante. Por cierto, un ejemplo lo pueden ver en mi blog, en el gadget "Archivo [+/-]" que se encuentra en la sidebar.

Si bien la forma de expandir y contraer es casi la misma para cualquier gadget, he notado que a muchos les parece más difícil hacerlo en el gadget de etiquetas y de archivos, quizás porque la estructura del gadget es diferente a los de cualquier otro que agreguemos. Así que hoy vamos a ver cómo expandir y contraer el gadget de Archivos con un efecto deslizante y más adelante haremos lo mismo con el gadget de etiquetas y finalmente con los de cualquier otro gadget.

Ahora empecemos:

1.§ Vamos a Diseño - Edición de HTML y Expandir plantillas de artilugios.

2.§ Con ayuda de CTRL+F buscamos </head> y antes de éste pegaremos el siguiente código:

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
<!-- Prototype y Scriptaculous-->

Sí ya tenemos este código en nuestra plantilla no será necesario agregarlo de nuevo.

3.§ Ahora , nuevamente con ayuda de CTRL+F buscaremos el nombre que le dimos al gadget de nuestra sección archivos. Puede que le hayamos puesto simplemente "Archivo" (como en mi caso) u otro nombre (Mis archivos, Blog Archive,etc).
Por ejemplo, digamos que mi sección de archivos se llama Archivo del blog,el nombre deberemos de buscarlo en la plantilla, pero al buscar nos encontraremos con dos o tres, así que el que usaremos será el que tenga la siguiente estructura:


<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'>

4.§ Con mucho cuidado insertamos lo que está resaltado en negrita, sin olvidar el </div> que está casi al final; debemos de tener en cuenta que el código puede cambiar un poco según cada plantilla, pero nos guiaremos por el código que está debajo de las líneas que pegaremos:


<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'>
<b:includable id='main'>
<a href='#' onclick='Effect.toggle("Archivo","slide"); return false'>
<b:if cond='data:title'>
<h2>&#9660;&#47;&#9650; <data:title/></h2>
</b:if>
</a><div align='center' id='Archivo' style='display: none;'>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>

Damos click a guardar y listo !

48 opinaron:

Juan Carlos

Muy bueno justo lo que buscaba gracias!

Responder
G

Justo iba a preguntarte cómo hacías para que tu Archivo esté con ese efecto deslizante; la entrada está muy buena, y voy a aplicar cuando tenga algo de tiempito

Responder
Yessmi

Me encantó, el tutorial muy bueno y entendible.

Besos :)

Responder
squirrel

Queda muy bien el efecto, se ve super y además se ve sencillo de hacer yo pensé que sería complicadísimo, pero ahora veo que no :)

Responder
Adrián Aratan

El efecto deslizante se ve genial! muy bueno :)

Responder
Luis Jesus

Muakaaaaaaaaa :D eres lo máximo gracias por la ayuda en mi duda jeje, y gracias por comentar mi post

www.astaroth-thehistoryend.blogspot.com

Responder
Luis Jesus

Yupiiiiiiii ... ;) Lo puse en mi otro blog también :) ..

Responder
Graciela de Palomas

lo tengo en algunos gadget del blog, queda prolijo y sumamente coqueto :D
Besos mi tesoro y unos días bonitos :)

Responder
Luis Jesus

hehe no hay problema un gusto :) muaka

Responder
Jéssica YK

» Juan Carlos: me alegra que te haya servido.

» G: gracias :)

» Yessmi: me alegra que te haya servido el post.

» squirrel: ya viste que nos es nada complicado, me alegra que te haya servido.

» Adrián Aratan: gracias :)

» Luis Jesus: me alegra que te haya servido, tus blogs han quedado geniales!

» Graciela de Palomas: gracias por tus palabras, simpre es un gusto tenerte por el blog :)

» Luis Jesus: vi tus blog y ambos quedaron muy buenos :)

S@lu2

Responder
Mackie

hola como va, tengo un problema con scriptaculous y prototype si lo uso se bloquean los ultimos comentarios y ultimas entradas. imagino que hay un conflicto con algo ...
me ayudas ?
hay otros efectos que cumplan la misma funcion ?
gracias.
saludos.

Responder
Jéssica YK

Mackie: es extraño, nunca había oído de ese problema, pero puede suceder.

Sí, hay otra forma de expandir y contraer los gadgets, pero sería con javascript. Se expandiría y recogería, como si aplicases Scriptaculous, pero ya no tendría el efecto deslizante.
Si deseas aplicarlo, puedes mirar esta entrada.

S@lu2

Responder
Kuston

hola que tal, me salio todo bien, muy bien explicado, mi gadget de archivo se contrajo y todo, pero tengo un problema, despues de hacer esto el gadget de "Seguidores" no aparece (solo el título). Espero que me ayudes, gracias

Muy buen blog...Jéssica

Responder
Jéssica YK

kuston: he visto tu blog en Firefox y en IE; en el primer caso, efectivamente, el gadget de Seguidores no se ve; en el segundo caso el gadget aparece.

El problema con este gadget depende del navegador, que parece ser incompatible con Scriptaculous (que es lo que se usa para que tenga efecto deslizante).
En todo caso, lo que podrías hacer es dejarlo como está y poner un enlace para seguir tu blog (para los que usen Firefox) o podrías ver si el gadget aparece en Firefox usando el expandir y contraer pero SIN efecto deslizante, mirando esta entrada.
No se exactamente si solucionará el problema,pero puedes intentarlo.

S@lu2

Responder
Nuria Cortés

Hola Jessica,

Quería saber si es posible que las etiquetas se distribuyan como el archivo, es decir, con jerarquías. Por ejemplo, a mí me gustaría que mis etiquetas se distribuyeran en países y que al pinchar en esa categoría apareciera a su vez, por ejemplo, hoteles, restaurantes, excursiones etc... y ya eso se pueda pinchar. Supongo que es más que probable que no exista porque no lo he visto en ningún sitio; Si es así, me contentaré con lo de que al pinchar en una etiqueta aparezcan las entradas sin expandir que, la verdad sea dicha, me parece fantástico y me lo he instalado después de leer tu explicación. Muchas gracias!!!

Responder
Jéssica YK

» Nuria Cortés:
Se podría hacer, pero manualmente y con un menú.
Si deseas implementarlo, mira esta entrada.

S@lu2

Responder
Anónimo

Good brief and this enter helped me alot in my college assignement. Thank you seeking your information.

Responder
hecgabor

:D hola... te comento que utilize este truco blogger en mi busqueda de un buen diseño para mi blog ...
te agredezco por el aporte me quedo excelente el blog...
ahorra bastante espacio ..
un saludo
y gracias ... :D

Responder
Tattyalbo

Hola, una pregunta, la otra vez en mi otro blog quise implementarlo, pero como tenía el botón de "Ir Arriba" creí que eran incompatibles y en vez de expandirse el widget, se iba para arriba, ahora en mi blog nuevo que estoy construyendo (http://lomejordelpower.blogspot.com/), me pasa lo mismo, le he implementado efecto css de lightbox a imagenes y videos, no sé si será eso o no.

Si sabes lo que pueda ser o como arreglarlo dime por favor

Salu2

pd: el codigo no lo tengo implementado por mientras...

Responder
Jéssica YK

» hecgabor:
Sí, tienes razón, ahorra mucho espacio. Me alegra que el post te haya sido de ayuda.

» Tattyalbo:
Tendrías que implementar el código para que yo pueda ver lo que sucede y así poder ayudarte.

S@lu2

Responder
Tattyalbo

se me habia olvidado suscribirme a la entrada xD...

ahora lo implementé...

http://lomejordelpower.blogspot.com/ (no se ve en IE)

gracias de antemano...

Responder
Jéssica YK

» Tattyalbo:
He revisado tu blog y creo que el problema está en que has mezclado dos librerías: jQuery con Prototype y Scriptaculous.Como son incompatibles ha generado un problema.
En todo caso, tendrías decidirte por una de las dos. Si te decides por jQuery, deberás aplicar el expandir/contraer con jQuery; o bien podrías aplicar el expandir/contraer, pero ya sin efecto deslizante, donde se usa puro JavaScript.

S@lu2

Responder
Ana Laura

Funciona muy bien, gracias. Con tu permiso, te enlazo desde mi blog, saludos!

Responder
Ana Laura

Te acabo de agregar, pero no sé bien por qué me dice que no detecta tu feed y que no podrá mostrar tus actualizaciones :S

Responder
Jéssica YK

» Ana Laura:
Me alegra que te sea útil mi ayuda.

En cuanto a agregar mi blog a tu lista de blogs, lo que tienes que hacer es en lugar de agregar la url de mi blog (http://diyva.blogspot.com/) debes agregar la siguiente url: http://feeds.feedburner.com/diyva

Entonces, borra la dirección que pusiste, agrega la que te indiqué y podrás agregarme a tu blog :)

S@lu2

Responder
Ana Laura

Ya está arreglado :D Muchas gracias por visitarme y darme la solución en mi blog, y me alegro que te gustara mi entrada.

Un saludo grande :)

Responder
Jéssica YK

» Ana Laura:
Gracias a ti por la visita. Y sí, me gustó ese post de tu blog.

Un s@ludo grande para ti también!

Responder
Jesús Ángel

Gracias, es justo lo que estaba buscando.
Un saludo

Responder
Madness Electronics
Este comentario ha sido eliminado por el autor.
Responder
Madness Electronics
Este comentario ha sido eliminado por el autor.
Responder
Madness Electronics

Hola, tengo un problema cuando inserto la segunda parte me saca este mensaje: "No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The element type "b:widget" must be terminated by the matching end-tag "". "
Y entonces lo termine con /b:widget y me sale: "Se ha encontrado más de un artilugio con el ID: BlogArchive1. Los ID de artilugio deben ser exclusivos."

No se que hacer . Espero tu respuesta. Gracias

Responder
Jéssica YK

» Madness Electronics:
Vi tu blog y me alegra que hayas solucionado el problema.

S@lu2

Responder
Madness Electronics

Gracias por responder, pero tengo otra duda, revisando otras templates, trate de aplicar esto a esta nueva plantilla, y mira que no me funciona, podrias ver, Gracias

Pagina: http://madnessprueba.blogspot.com

Responder
loren malone

hola necesito ayuda,me he registrado en filefreak y no puedo subir mi musica a mixpod.no se que ocurre,no me llega el correo y yo quisiera subir mis creaciones musicales.me he hecho un blog pero no tengo mucha idea de este mundillo.gracias de corazon

Responder
Jéssica YK

» Madness Electronics:
Con el código fuente no puedo ver toda tu plantilla; para revisarla y ver dónde está el problema, tendrías que enviarme una copia de tu plantilla a mi correo, que puedes ver arriba del blo, donde dice contacto.

S@lu2

Responder
Jéssica YK

» loren malone:
El código del Mixpod para pegar en tu blog no llega al correo, sino que aparece en la misma página.

S@lu2

Responder
Fherguzon Fletcher

Me gusto la explicacion tan clara, muchas gracias. :) Ademas funciono.

Responder
Jéssica YK

» Fherguzon Fletcher:

Qué bueno que te haya gustado y sido de utilidad. Gracias a ti por la visita .

S@lu2

Responder
Roger Pereyra Sandoval

gracias esto fue lo que andaba buscando..eres lo máximo

Jéssica YK

» Roger Pereyra Sandoval:
Qué bueno que el tutorial te haya sido de ayuda. Gracias por la visita.

S@lu2

Responder
Pablo Santo

andubo perfecto! algo asi estaba buscando asi que me re sirvio, gracias :D

Jéssica YK

» Pablo Santo:
Me alegra que el tutorial te haya servido.
Gracias por el comentario y la visita.

S@lu2

Responder
Karla Dávila

Me urge su ayuda necesito un código html. Deseo crear una imagen que contenga el botones que me diriga a Inicio, archivos de blog, u otros botones. Les dejo un ejemplo de este blog:

http://beatrizpereiraw.blogspot.com/

muchas gracias espero pronta respuesta.

Jéssica YK

» Karla Dávila:
Creo que te refieres a cómo agregar un menú de enlaces a tu blog. En mi blog tengo algunos tutoriales con menús. En el buscador coloca menú y te saldrá una lista de post.

Si no entendí bien tu pregunta, no dudes en avisarme
S@lu2

Responder
Isa ML

He seguido todos los pasos y no consigo el efecto ¿qué estaré haciendo mal? :(

Jéssica YK

»Isa ML:
Tednría que revisar el código de tu plantilla. Descárgala y envíamela al correo que figura en la parte superior izquierda (contacto).

S@lu2

Responder
José Alejandro Tejero Aguilar

Gracias, me fue muy util

Responder
FelixD MontañoV

Hola podría publicar un ejemplo de como hacer la barra de navegación superior que tiene este blog, esa donde dice contacto y acceder? por favor de antemanos gracias...

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio