Una interesante alternativa para los lectores de nuestro blog es que puedan mostrar y ocultar la barra lateral (Sidebar), a voluntad. Este efecto se puede lograr fácilmente, así (Únicamente para plantillas antiguas):
Tomamos como referencia la plantilla Mínima original:
Vamos a
Editar HTML:
| Diseño | ► | Plantilla | ► | Editar HTML | ► | Click dentro del editor | ► | Ctrl+f | ► | 
|
...y localizamos el siguiente código poniendo dentro del rectángulo de búsqueda (Search) una línea del mismo:
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#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 */ |
El anterior codigo no lo vamos a modificar. Sencillamente vamos a observar en él las medidas de nuestro blog:
- El primer bloque,
#outer-wrapper, nos indica el ancho del blog, que es de 660px.
- El segundo bloque,
#main-wrapper, nos indica el ancho de las entradas, que es de 410px.
- El tercer bloque,
#sidebar-wrapper, nos indica el ancho de la sidebar, que es de 220px.
Para lograr nuestro objetivo debemos darle al
#main-wrapper, ancho de las entradas, dos alternativas:
- Que adquiera el ancho total del blog (660px) y de esta manera impida ver la sidebar, y
- que vuelva a su ancho normal (410px), y permita ver la sidebar.
Para lograr lo anterior vamos a
Diseño ►
Diseño, añadimos, debajo de la cabecera del blog, un gadget del tipo HTML/Javasript, en el cual pegamos el siguiente código:
<center>
<a href="javascript:void(0);" onclick="getElementById('sidebar-wrapper').style.display='none'; getElementById('main-wrapper').style.width='660px';">Ocultar Sidebar</a> -
<a href="javascript:void(0);" onclick="getElementById('sidebar-wrapper').style.display=''; getElementById('main-wrapper').style.width='410px'">Mostrar Sidebar</a>
</center> |
Como podemos observar el anterior código contiene tanto el ancho del blog (660px), como el ancho del cuerpo de las entradas (410px), que debemos cambiar por las medidas de nuestro blog. Veamos este efecto en funcionamiento:
2 comentarios :
Este blog me a venir estupendamente como ayuda y guía para aprender, pero vendré con más tiempo a comenzar a leer todas las páginas de tu blog para aprender muchas cosas desconocidas.
Un beso.
María: Bienvenida. Espero que el contenido de este blog te sea útil.
Un abrazo.
Este blog ya cumplió su ciclo, por esta razón, aunque sigue a disposición de los usuarios, no se harán más publicaciones ni se atenderán más consultas. La respuesta a su inquietud puede estar entre los comentarios hechos hasta aquí.
El autor.