Cómo ocultar una sidebar o elimarla

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Ocultar o eliminar una sidebar (barra lateral) en el blog

Posiblemente desees crear una nueva estructura en tu blog y te apetezca deshacerte de la barra lateral. Con este truco, obtendrás una estructura diferente, de manera que las entradas tengan el mayor ancho posible.

Ten en cuenta que los gadgets de la sidebar podrás añadirlos en el footer (pié del blog) o en una de las cuatro columnas que puedes instalar, encima de las entradas, mirando esta entrada.

Voy a explicarte dos procedimientos para deshacernos de la barra lateral: ocultarla o eliminarla.

Diseño>Edición de HTML>expandimos artilugios

Para ocultar la barra lateral


En el CSS de tu plantilla busca este bloque:

#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 */
}

Y agrega las dos líneas resaltadas en color verde:

#sidebar-wrapper {
visibility: hidden;
display: none;
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 */
}

Finalmente, haz vista previa y guarda cambios.


Para eliminar la barra lateral


En el CSS de tu plantilla busca este bloque y bórralo:

#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 */
}

Ahora busca lo siguiente:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML2' locked='false' title='Site info' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>

Para que la búsqueda sea más sencilla, encuentra esta línea:

<div id='sidebar-wrapper'>

Y elimina (con ella incluida) todo el código que aparezca hasta el cierre </div> (éste último incluido).

Finalmente, haz vista previa y guarda cambios.

Si te decisdes por aplicar este último método, ten en cuenta que debes borrar todo el código, desde la línea <div id='sidebar-wrapper'> hasta su cierre, </div> pero ten cuidado: puedes confundirte.

Entre esas dos líneas están los gadgets o elementos de página, los cuales también tienen el cierre </div>

Borra hasta el </div> de <div id='sidebar-wrapper'> que estará encima de lo siguiente:

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>&#160;</div>

</div> <!-- end content-wrapper -->

O debajo de la etiqueta </b:section>

Nota:

No todas las plantillas son iguales (y mucho menos, las que están modificadas).

Posiblemente tengas problemas para realizar alguna de estas fases o para encontrar algún código. En ese caso, consúltame por medio de un comentario.