miércoles, 6 de octubre de 2010

Ocultar sidebar en las páginas estáticas para plantillas nuevas

Hace unos meses vimos cómo ocultar la sidebar en las páginas estáticas cuando recién las páginas estaban disponibles en Blogger. Es un método que funciona muy bien para las plantillas clásicas, sin embargo, después aparecieron las nuevas del Diseñador de plantillas de Blogger y ese método no funciona para ellas.

Así que veremos cómo ocultar la sidebar en las páginas estáticas para quienes usan plantillas nuevas del Diseñador de plantillas de Blogger.

Primero tenemos que conocer el ancho total del blog, este lo sabremos buscando una línea como esta:
<b:variable default='930px' name='content.width' type='length' value='960px'/>
Ese último número es el ancho del blog, en este caso es de 960px y es el que necesitamos. Sino tuviéramos ese último número entonces tomamos el primero que aparece.

Luego buscamos esta línea:
<div class='column-left-outer'>

Y la cambiamos por esta:
<div class='column-left-outer' id='sidebar-left'>


También buscamos esta línea:
<div class='column-right-outer'>

Y de igual forma la cambiamos, pero por esta otra:
<div class='column-right-outer' id='sidebar-right'>


Ahora buscamos la etiqueta </head> y pegamos ANTES de ella lo siguiente:
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#sidebar-left {
display: none;
visibility: hidden;
}
#sidebar-right {
display: none;
visibility: hidden;
}
#main {
width: 960px; /* Aquí va el ancho total del blog */
}
</style>
</b:if>

Sólo cambiamos donde indica que va el ancho total del blog y con eso habremos ocultado la(s) sidebar(s) en las páginas estáticas.

En el caso de que tu plantilla tenga una sidebar en la izquierda entonces buscamos una línea como esta:
<b:variable default='0' name='main.column.left.width' type='length' value='180px'/>

Y vemos el último número que es el ancho de esa sidebar. A ese valor (en este caso de 180px) le restamos 25px, es decir, serían 155px en nuestro ejemplo.

Luego debajo de #main { agregamos un margen izquierdo donde restaremos el ancho de la sidebar menos los 25px.
Quedaría así ese fragmento:
#main {
width: 960px; /* Aquí va el ancho total del blog */
margin-left: -155px;
}

Ahí lo que hemos hecho es restar el ancho de la sidebar izquierda para que no quede un espacio vacío y las entradas no estén inclinadas al lado derecho.

Éste último procedimiento, es como dije, sólo para quienes tienen una sidebar en el lado izquierdo de la plantilla. Para los demás habrá bastado con los primeros pasos.

No hay comentarios:

Publicar un comentario