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.

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.