Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

La sidebar o barra lateral como un acordeón

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).


La sidebar o barra lateral como un acordeón en blog de blogger


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=&quot;sidebar&quot;;
var accordionside1=true;
var sideshow1=new Array(0,0);
var sidebarnameacc2=&quot;sidebar2&quot;;
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.

www.bonaisima.com dice...

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

Jaime Trujillo Escobedo dice...

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).

Chayito dice...

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

Chayito dice...

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)

Jaime Trujillo Escobedo dice...

No es tan difícil de hacer, Chayito, pero al parecer optaste por otra solución. Si cambias de idea dímelo.

- Silvia - dice...

Esto me interesa, pero solo para algunos apartados de la sidebar del blog, no en todos ¿Cómo lo hago?

Jaime Trujillo Escobedo dice...

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.

- Silvia - dice...

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.

Jaime Trujillo Escobedo dice...

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.

- Silvia - dice...

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.

Jaime Trujillo Escobedo dice...

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.

APEA dice...

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.

Jaime Trujillo Escobedo dice...

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!

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo