El efecto acordeón es algo sobre lo que se han creado numerosos trucos para blogger. Desde menús hasta tabs o pestañas para mostrar contenido.
Al aplicarlo, mostramos los títulos de un bloque de contenido (ya sea enlace o imagen). Al hacer clic sobre alguno de estos títulos, el contenido se despliega de manera independiente, es decir, si abrimos un apartado, el que ya estaba abierto se cerrará, lo que evita que todo pueda desplegarse al mismo tiempo, afectando así al espacio del blog.
Gracias a Abu Farhan, ahora también podremos utilizar el efecto acordeón en los gadgets de nuestra barra lateral y además, con un efecto deslizante muy atractivo (usando JQuery).
Puedes ver el truco en funcionamiento en este blog, haciendo clic en el título "Conseguir Truco" por ejemplo.
Diseño>Edición de HTML>expandimos artilugios
Busca la etiqueta </head> y encima incluye lo siguiente:
<script src='http://sites.google.com/site/scriptsbalcon/b/jquery1.2.6.js' type='text/javascript'/>
<script type='text/javascript'>
var sidebarnameacc1="sidebar";
var accordionside1=true;
var sideshow1=new Array(0,0);
var sidebarnameacc2="sidebar2";
var accordionside2=false;
var sideshow2=new Array(0,0);
</script>
<script src='http://sites.google.com/site/scriptsbalcon/b/blacordeon.js' type='text/javascript'/>
<style>.sidebar h2.headactive {border: 1px solid #cccccc; padding: 4px;}
.sidebar h2 {border: 1px solid #cccccc; padding: 4px;}
.sidebar2 h2.headactive {border: 1px solid #cccccc; padding: 4px;}</style>
La línea en color verde representa el script de jQuery (1.2.6), por lo que si ya tienes jQuery en el blog, no será necesario instalarlo de nuevo.
Modificar los títulos de los gadgets
Para cambiar el aspecto de los títulos ten en cuenta lo siguiente:
border: 1px solid #cccccc; Representa el borde. El grosor es de 1 píxel, el estilo es solid (ver estilos de borde) y el color es gris -#cccccc- pero puede cambiarse (ver tabla de colores).
Las propiedades que agregues deben estar presentes en tres apartados. Dentro de .sidebar h2.headactive, .sidebar h2 y .sidebar2 h2.headactive.
Si los títulos de tu barra lateral ya han sido personalizados y no quieres cambiar su aspecto, elimina esto en el código:
<style>.sidebar h2.headactive {border: 1px solid #cccccc; padding: 4px;}
.sidebar h2 {border: 1px solid #cccccc; padding: 4px;}
.sidebar2 h2.headactive {border: 1px solid #cccccc; padding: 4px;}</style>
Finalmente guarda la plantilla.
¿Problemas al comentar? Utiliza 
He notado que esto no me funciona en el explorer 8 ,me imagino que en los demas tampoco ,a que se debe esto ,si me pudiera ayudar ,te lo agradeceria ,gracias
Bonaisima, he revisado el truco y en mi blog de pruebas funciona correctamente :S.
En tu plantilla, ¿tienes algún truco instalado que necesite el uso de las librerías Scriptaculous o Prototype? Si tienes alguna de las dos, este truco no funcionará correctamente (funciona con jQuery).
Si quisiera agregar una imagen en vez del titulo de gadget, ¿cómo sería?...
En ejemplo:
...title='Iniciogif' type='Image'>...
Donde dice "iniciogif" es el titulo del gadget (obviamente sale en texto)pero si quisiera cambiarlo por una imagen, ¿qué tendría que poner?
Gracias, Jaime. XD
Olvidalo, Jaime, me quedé con otra idea XD, pero gracias de todos modos; lo que queria era que al hacer click en una imagen en la sidebar se desplegaran demás imagenes por debajo, y que al hacer click respectivamente a una de ellas te mandara a sus definidas páginas...:S pero supongo que es más complicado, así que mejor pondré todas las imagenes (titulos de etiquetas gif) en una entrada y la enlazaré desde una imagen en la sidebar... Gracias, Jaime (XOXOXO)
No es tan difícil de hacer, Chayito, pero al parecer optaste por otra solución. Si cambias de idea dímelo.
Esto me interesa, pero solo para algunos apartados de la sidebar del blog, no en todos ¿Cómo lo hago?
Silvia, si me permites te aconsejaría este otro truco para elaborar lo que buscas.
Lo mejor de todo es que una vez incluido el código que explico en dicha entrada y haber guardado los cambios, podrás arrastrar los gadgets a cualquier apartado de la sidebar.
Claro que te permito la sugerencia Jaime. Parece a priori un poco tedioso y complicado (y largo), veré si me sale. Estos días cuando tenga tiempo lo probaré.
Gracias compañero bloggero, es creo lo que iba buscando. Salu2.
Silvia, es un truco que requiere más tiempo pero ofrece un buen resultado. Por la dificultad no debes preocuparte, desde que recibas un error avísame.
Gracias a ti por seguir mis artículos. Abrazos.
Bueno Jaime, el truco está bien, pero navegando más por tu balcón me topé con algo mejor y que se adapta a mis necesidades y a lo que quiero mostrar: el truco de expandir y contraer cosas en la sidebar mediante un enlace de texto. Poco a poco voy amoldándolo y todo gracias a tus sencillas explicaciones.
Una alternativa ideal, Silvia. Encontrarás también el mismo truco pero con una nueva característica que incluye el efecto deslizante al pulsar el enlace y desplegar contenido.
Abrazos.
Eres un genio, como siempre.
Es un placer rebuscar en tu blog.
He aplicado este truco, pero me gustaría quitarle el subrayado a los enlaces, ¿Cómo lo hago?
APEA Blog
Un saludo, Jaime.
Muy agradable tu comentario Apea. Para deshacerte del subrayado en los enlaces de tu sidebar bastará con localizar este bloque de CSS en tu plantilla:
.r2 .widget a {
text-decoration: underline;
}
Reemplaza underline por none y listo. ¡Saludos!