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.

Botón para mostrar y ocultar la sidebar (barra lateral)

Con Javascript podemos hacer innumerables cosas que pueden resultar de mucha utilidad para los lectores de un blog o una página web.

Probando con distintos atributos se me ocurrió construir un botón que oculte o muestre la barra lateral y permita modificar el ancho de las entradas en el blog, ofreciendo así un amplio espacio para poder leer de manera cómoda.

Es muy sencillo de instalar y el resultado es bastante prometedor. Puedes probarlo en este blog de pruebas pulsando el botón con el símbolo mas.

Botón para mostrar y ocultar la sidebar (barra lateral)


Diseño>Edición HTML>expandimos artilugios




Busca estos bloques de CSS (o al menos, de aspecto similar):

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

¿Ves la línea width: 410px; y width: 220px;? Representan el ancho del bloque de entradas y la barra lateral, respectivamente.

Lo único que necesitas hacer en este apartado del truco es apuntar el ancho de la zona de entradas (que en este caso es de 410 píxeles) y la suma del ancho de la sidebar con el del bloque de entradas, que en mi código es de 630 píxeles. Para ello puedes hacer uso del bloc de notas o Notepad.


Diseño>añadir gadget (elemento de página)>html-javascript






Pega el código:

<a href="javascript:void(0);" onclick="getElementById('sidebar-wrapper').style.display='none'; getElementById('main-wrapper').style.width='630px';"><img title="Agrandar entrada" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-9RRnL_ven0ukdYHNTyT2UDwkVw6mzTs82bjw-cPdxcWAZm7heYvwvO2LZwnMqM0g_7-1wSO7pxIPKsOutYSeOmEkSWhvHFxr0cpgE4EPO4oOA_Lh42EhQhY3uFNPgGYVd8c__XriqJOR/s320/blmas.png" /></a>
<a href="javascript:void(0);" onclick="getElementById('sidebar-wrapper').style.display=''; getElementById('main-wrapper').style.width='410px'"><img title="Encoger entrada" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsRl_EM8n-AYa47dRXAcclUBx-_m1TAOFFiCZt5sY379YNlVB0qNsmQOzpv9QICsHfrOfi7rRTu97pTuLOukN4NazdktKxhAddaXtTnnrmh75jlanVNHyUp1yhm0BbXF72RwzbmmlOkfSs/s320/blmenos.png" /></a>

Como puedes observar, hay dos valores resaltados en color verde. Se trata del ancho total (que previamente hemos sumado) y del ancho que hay en la zona de las entradas.

Reemplaza estas cifras si en tu blog tienes un valor diferente para el ancho en cada bloque.

Finalmente guarda el gadget y arrástralo hasta ponerlo encima de las entradas del blog, de manera que pueda visualizarse al ocultar la sidebar.

Si tu blog tiene dos barras laterales y deseas insertar el botón para ocultarlas, utiliza este otro código en lugar del anterior:

<a href="javascript:void(0);" onclick="getElementById('sidebar-wrapper').style.display='none';getElementById('newsidebar-wrapper').style.display='none'; getElementById('main-wrapper').style.width='630px';"><img title="Agrandar entrada" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-9RRnL_ven0ukdYHNTyT2UDwkVw6mzTs82bjw-cPdxcWAZm7heYvwvO2LZwnMqM0g_7-1wSO7pxIPKsOutYSeOmEkSWhvHFxr0cpgE4EPO4oOA_Lh42EhQhY3uFNPgGYVd8c__XriqJOR/s320/blmas.png" /></a>
<a href="javascript:void(0);" onclick="getElementById('sidebar-wrapper').style.display=''; getElementById('newsidebar-wrapper').style.display=''; getElementById('main-wrapper').style.width='410px'"><img title="Encoger entrada" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsRl_EM8n-AYa47dRXAcclUBx-_m1TAOFFiCZt5sY379YNlVB0qNsmQOzpv9QICsHfrOfi7rRTu97pTuLOukN4NazdktKxhAddaXtTnnrmh75jlanVNHyUp1yhm0BbXF72RwzbmmlOkfSs/s320/blmenos.png" /></a>

Lo que está resaltado en color verde es el nombre de la nueva sidebar (barra lateral). Puede que en tu plantilla, ésta tenga un nombre distinto. En caso de no saber como encontrarlo, deja un comentario y podré ayudarte.

Nota:

Puedes cambiar las imágenes del botón reemplazando las URL:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-9RRnL_ven0ukdYHNTyT2UDwkVw6mzTs82bjw-cPdxcWAZm7heYvwvO2LZwnMqM0g_7-1wSO7pxIPKsOutYSeOmEkSWhvHFxr0cpgE4EPO4oOA_Lh42EhQhY3uFNPgGYVd8c__XriqJOR/s320/blmas.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsRl_EM8n-AYa47dRXAcclUBx-_m1TAOFFiCZt5sY379YNlVB0qNsmQOzpv9QICsHfrOfi7rRTu97pTuLOukN4NazdktKxhAddaXtTnnrmh75jlanVNHyUp1yhm0BbXF72RwzbmmlOkfSs/s320/blmenos.png

Por la dirección de tus iconos. Encontrarás un gran surtido de símbolos en esta página y esta otra.

El Potro dice...

Hola Jaime, qué magnifico truco que nos presentas.
Había visto dos formas para hacerlo pero en ambas era mucho muy complicado y con resultados horribles en algunas plantillas, pero este es sumamente sencillo y efectivo.
Muchas gracias por compartirlo :)

Jaime Trujillo Escobedo dice...

¡Que alegría, El Potro! Me alegra tenerte por aquí ;). Es cierto, incluso hay scripts para conseguir dicho truco.

Aprovecho preguntarte si me permitirías coger ideas del truco que publicaste acerca del menú que cambia el color de fondo en el blog (modificaré el script de manera que pueda hacerse con onmouseover). Claro está que te citaré en la entrada :D.

Vku dice...

Jaime vengo del blog del Potro.

Te comento sobre este código que esta bueno,lo que hay que tener cuidado es con el padding o margin si la plantilla los utiliza hay que restarlos del total.
Y hay algunas plantillas que hay que cambiar sidebar-wrapper y main-wrapper por sidebar y main sin -wrapper

Espero te sea de utilidad.

Unknown dice...

Hola Jaime, te quería hacer una consulta con respecto a este tema, como se podría hacer para una plantilla de dos sidebar izquierda y derecha y al medio las entradas.
Gracias y un abrazo. :23) :31)

Jaime Trujillo Escobedo dice...

¡Bienvenido, Vku!

Así es. También podemos encontrarnos con nombres como l_sidebar o r_sidebar (sobre todo en plantillas modificadas).

Lo que comentas de sidebar-wrapper y main-wrapper es muy cierto (yo mismo lo he encontrado en varias plantillas) ;).

El Potro dice...

Por supuesto Jaime, puedes modificar todo lo que quieras que para eso son los códigos ;)

Un abrazo enorme!

Jaime Trujillo Escobedo dice...

Antonio, he actualizado la entrada de manera que puedas conseguir lo que deseas. Para ello se utiliza un código algo distinto (ya disponible en el artículo) ;).

Jaime Trujillo Escobedo dice...

Muchas gracias, El Potro. Ya preparé la entrada.

¡Abrazos!

Jose dice...

Hola Jaime, a mí no me funciona del todo: me oculta la sidebar, pero la entrada se queda igual.
¿Qué se puede hacer?

Jaime Trujillo Escobedo dice...

Jose, he conseguido hacer que el botón agrande la zona de entradas pero desgraciadamente, el contenido de cada post se "corta" por el fondo de la sidebar (aún si esta está oculta).

Me temo que con la plantilla Son of Moto, este truco no funcionará a la perfección :S.

Unknown dice...

Gracias por esta entrada, muy bien explicada y muy clara, es muy cómodo para ver tus post más comodamente :) y agregar cositas en la sidebar ;)

besos ronroneados en mi abrazo ^_^

Jaime Trujillo Escobedo dice...

¡Gracias Pau! Actualmente lo instalé en El Balcón por la característica que bien has descrito en tu comentario: lo cómodo que resulta para lectores que desean un post ancho ;).

Abrazo ronroneado en mi saludo.

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