Barra lateral oculta y "ancho total" en la zona de entradas al acceder a los artículos individualmente

En varias ocasiones me han preguntado la manera de hacer que las entradas tengan un "ancho total" cuando se abren de forma individual y que, al mismo tiempo, la sidebar (barra lateral) se oculte, permaneciendo visible únicamente en la portada del blog, en las páginas de etiquetas o de archivos, o en los resultados de búsqueda.

Para conseguirlo tan solo necesitamos agregar un bloque con unas propiedades distintas con respecto a los tamaños y que solo se ejecute en las páginas de posts individuales.

Durante este tutorial voy a utilizar los valores presentes en el CSS de la plantilla mínima que ofrece blogger. Aún así, el truco puede realizarse en plantillas modificadas ya que solo tenemos que encontrar los códigos necesarios.

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

Encuentra estos bloques de CSS (o 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 las líneas en negrita? Representan el ancho de la zona de entradas y el de la sidebar, respectivamente.

Copia ambos bloques en un documento en blanco, usando el bloc de notas o Microsoft Office Word por ejemplo.

Ahora busca la etiqueta </head> y justo encima añade este código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#main-wrapper {width: 630px;}
#sidebar-wrapper {visibility: hidden; display: none;}
</style>
</b:if>

La línea verde indica el ancho de la zona de entradas. Si te fijas, el valor utilizado (630) es la suma del ancho del main-wrapper y la de sidebar-wrapper que aparecen en los bloques que previamente reservamos.

La segunda línea, en naranja, aporta dos nuevas propiedades a la barra lateral (sidebar-wrapper), visibility: hidden; (que traducido al castellano sería visibilidad: oculta;) y display: none; (mostrar: no;).

En mi caso, la suma ha dado como resultado 630 píxeles pero los anchos de tu plantilla pueden variar, cambiando así la cifra a utilizar en la línea verde (dentro de width: 630px;).

Guarda la plantilla y accede al blog. Abre una entrada de forma individual para comprobar que la barra lateral desaparece y el contenido se expande.

Nota:

- Si en tu plantilla no aparecen los bloques de CSS indicados en el primer paso, o simplemente al agregar el código antes de la etiqueta </head> no se percibe cambio alguno, deja un comentario con la dirección de tu blog.

La solución será tan simple como cambiar la ID (nombre identificativo) de cada elemento (main-wrapper y sidebar-wrapper).