Ocultar la Sidebar en las Páginas estáticas

Ya hemos visto cómo personalizar el gadget de las Páginas y cómo mostrar las Páginas de forma diferente, pero me preguntan si se puede ocultar la sidebar cuando se está en las Páginas.

Sí se puede, y se realiza usando la misma condicional que usamos para mostrar las Páginas de forma distinta.

Puedes ver un ejemplo en este blog de pruebas, verás que al hacer click sobre una Página la sidebar desaparece y el contenido de la Página ocupa todo el ancho del blog.

ACLARACIÓN: Los elementos mencionados a continuación son los que usan la mayoría de las plantillas clásicas de Blogger, en otras plantillas posiblemente encontrarás los elementos con el mismo nombre, de lo contrario deberás localizar en tu plantilla cuál es el nombre que corresponde. Si usas una plantilla hecha a través del Diseñador de Plantillas de Blogger entonces sigue este tutorial.

Lo único que necesitamos es saber cuánto mide el outer-wrapper de tu blog; en la plantilla Mínima dice esto:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

En este caso el outer-wrapper mide 660px.
Entonces lo que haremos será entrar en Diseño > Edición de HTML y pegar antes de </head> lo siguiente:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#sidebar-wrapper {
width: 0px;
display:none;
visibility:hidden;
}
#main-wrapper {
width: 660px;
}
</style>
</b:if>

Como ven sólo hemos usado una condicional la cual indica que cuando se trate de una Página entonces el contenedor de la sidebar medirá 0px de ancho, o sea nada, y además el contenedor del área de las entradas medirá el total del ancho del blog, en este caso 660px.

Como mencioné antes, los nombres de los contenedores pueden variar según la plantilla, sólo deberán localizar cuál es el nombre del contendor de la sidebar (sidebar-wrapper), el área de las entradas (main-wrapper) y el ancho total del blog (outer-wrapper).

Por supuesto este hack también se puede combinar con el de

mostrar las Páginas de forma diferente, sólo habría que agregar los estilos correspondientes dentro de este código, con lo cual quedaría así de forma completa:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#sidebar-wrapper {
width: 0px;
display:none;
visibility:hidden;
}
#main-wrapper {
width: 660px;
}
.post {
color: #8A4B08; /* Color del texto */
border: 1px solid #FF8000; /* Color del borde */
margin:.5em 0 1.5em;
padding: 5px;
background: #F2F5A9; /* Color de fondo o imagen de fondo */
}
.post h3 a {
color: #cc6600; /* Color del titulo */
font-family: Impact; /* Tipo de letra del titulo */
font-size: 20px; /* Tamaño de letra del titulo */
text-transform: uppercase;
text-align: center; /* Alineación del título */
letter-spacing: 5px;
}
.post h3 a:hover {
color: #FF8000; /* Color del título al pasar el cursor */
}
.post img {
padding:4px;
border:2px solid #FF8000; /* Color del borde las imágenes */
}
</style>
</b:if>

Como ven, la primera parte contiene la indicación sobre ocultar la sidebar dentro de las Páginas y la segunda parte contiene los estilos para las Páginas.

De esta forma sencilla hemos podido ocultar la sidebar en las Páginas estáticas con la posibilidad de mostrar las Páginas de forma diferente.

14 de febrero de 2010 Publicado por El Potro , http://www.ciudadblogger.com/2010/02/ocultar-sidebar-en-las-paginas.html