Quitar sidebar en páginas de artículos de blogs de Blogger

Hace poco me hicieron una pregunta sobre este tema, así que voy a hacer un post rápido sobre el mismo. En realidad, conseguir que en las páginas de cada entrada o artículo se muestre una estructura diferente a la que aparece en la portada no es demasiado difícil. La clave está en el uso de condicionales, tema fundamental para el caso de Blogger, y del que ya hemos hablado en otras ocasiones. Vamos a analizarlo y os doy los códigos necesarios.

Bien, antes de nada justificaremos este post. ¿Por qué habríamos de personalizar así nuestro blog? Razones estéticas aparte, considero que puede ser de utilidad para el SEO, pues estamos eliminando posible ruido en las páginas de cada artículo. Es decir, si dentro de los artículos sólo tenemos eso, el propio artículo y nada más, estamos ayudando al buscador en la correcta indexación del contenido, lo que afecta y ayuda sin duda al posicionamiento.

Tras la justificación empiezo con la explicación. Para empezar os pongo un ejemplo. En este blog lo he aplicado. Como podréis ver si lo visitáis tiene una estructura de 3 columnas, mientras que al entrar en cada artículo ya sólo aparecen dos. La columna o sidebar de la izquierda ha desaparecido dentro de cada artículo.

En el "interior" ya sólo hay una columna lateral. La otra, que contenía las categorías del blog, se ha quitado. En lo que se refiere al SEO considero que es mejor pues las categorías generales son algo que concierne a la portada del blog, al blog en su conjunto diríamos, y no al artículo en sí, que puede no tener nada que ver con algunas categorías generales. Mantenerlas todas es, en cierto modo, añadir ruido para el buscador.

Entonces, ¿cómo quitar dicha columna? Esto se hace usando condicionales en el código en función al tipo de página. Así pues habremos de modificar la plantilla para conseguirlo.

• Importante: Como siempre, mucho cuidado cuando modifiquéis el código de la plantilla. Lo mejor será descargar primero una copia por seguridad, sobre todo si somos poco expertos.

Antes de nada os recuerdo que Blogger tiene distintos tipos de página: "Item" son las de los artículos, mientras que "Index" son las de la portada y siguientes, así como también las páginas de categorías. "Archive" correspondería a los archivos... y así. Visitad este link para obtener toda la información sobre el tema (este aspecto es fundamental).

De esta forma, lo que hemos de hacer es poner un contenido en un tipo de página y otro diferente en el resto. Aquí es donde entran en juego los condicionales.

En el artículo del link anterior ya puse bastante información sobre esto, pero como era relativa a la indexación en los buscadores (un tema completamente distinto) será mejor que vuelva a repetirlo aquí, con más claridad. En cualquier caso recomiendo fuertemente leer también el post mencionado.

Uso de condicionales para páginas de artículos en Blogger.

Brevemente, habremos de usar <b:if></b:if>. Todo lo que pongamos dentro de la etiqueta se aplicará sólo si se cumple la condición. La forma de expresar estas condiciones según el tipo de página en el código de Blogger es la siguiente:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
AQUÍ EL CÓDIGO ESPECIAL PARA LAS PÁGINAS DE ARTÍCULOS

</b:if>

Como podéis ver, además de IF también hay otro elemento, que son los dos signos de igual ==. Se usan para decir que la primera parte es igual a la segunda, lógicamente. Es decir, en el ejemplo anterior, estamos diciendo que "si el tipo de página es item", entonces... aplicar lo de dentro. Si no, pues no se hará nada.

• Nota: también podemos decir lo contrario usando !=, es decir, "si el tipo de página NO es item, entonces...". En este caso se aplicaría la condición no a las páginas de artículos, sino a todas las demás. Es también algo muy útil.

Añadir un estilo para que no se muestren elementos en función del tipo de página.

Bien, ya tenemos localizado el tipo de página, ahora lo que hay que decirle a Blogger es que, en dicho tipo de páginas, las de los artículos, no muestre el sidebar izquierdo. Esto lo haremos mediante CSS, concretamente con la propiedad display:none (no desplegar).

Realmente, lo complicado será localizar el elemento HTML al que aplicarle el estilo CSS para que no se muestre. Hay diversas formas de localizarlo, la más sencilla será tal vez usar las herramientas propias de los navegadores (Firefox, Chrome, etc...). Bastará con hacer clic derecho sobre el sidebar, y elegir "inspeccionar elemento". Después, nos moveremos por las etiquetas hasta encontrar la superior, la que englobe todo el sidebar o columna.

Como puede verse, en mi plantilla el sidebar izquierdo esta dentro de un DIV con una clase denominada "column-left-outer". Pues bien, será este div el que habremos de establecer que no se despliegue mediante CSS.

De esta forma, dentro de <head>, junto al resto de los estilos, añadiremos nuestro condicional especial:

<!-- condicional para quitar sidebar izquierdo en las páginas de artículos -->       
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <style type='text/css'>
.column-left-outer div {display:none}
</style> 

</b:if>

Y ya está, con esto le habremos dicho a Blogger que en las páginas de artículos no se despliegue el div de la columna izquierda. Eso sí, nos quedará un espacio en blanco, de forma que el trabajo no estaría terminado. En mi caso he aplicado muchos otros condicionales, para ensanchar el contenedor de los post y centrarlo todo en dichas páginas. Ya será cosa de cada uno dicha personalización.

Otro método para quitar el sidebar (sin usar CSS, sólo con condicionales).

Existe otro método bastante sencillo que no requiere CSS. Basta con buscar en la plantilla el contenedor de la columna izquierda (que como hemos visto es un div de clase .column-left-outer), y meterlo entero dentro de un condicional.

Aquí estaríamos dentro de <BODY>. Buscamos directamente el código de esa columna, y le aplicamos el condicional para que sólo aparezca esa parte del código si estamos en una página tipo index (las de la portada y similares):

<!-- condicional para sidebar izquierdo solo en portada -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>          
        <div class='column-left-outer'>
        <div class='column-left-inner'> 
          ... 
        </div>
        </div>
</b:if> 

Es decir, este método consiste en poner toda esa parte de la plantilla (column-left) en un condicional, para que aparezca únicamente en el tipo de páginas que le digamos. Si no estamos en dicho tipo de página no aplicará lo de dentro, con lo que no existirá allí dicho sidebar.

Seguramente es un método más agresivo que el basado en CSS. Yo recomendaría tal vez usar el primer método.

Otros usos similares de los condicionales y CSS para ocultar cosas en determinados tipos de página.

La imaginación es el límite. Como habéis visto, las posibilidades de personalización de Blogger son muy grandes, casi ilimitadas, si se sabe programarlo. Y no es demasiado difícil dicha programación.

Bastará con identificar el elemento que queramos que no aparezca, y aplicar dentro de <HEAD> el condicional y el estilo CSS. Por ejemplo:

<!-- condicional para quitar fecha en portada, paginacion y categorias -->       
<b:if cond='data:blog.pageType == &quot;index&quot;'>
  <style type='text/css'>
.date-header span {
    display: none;
}
</style> 

</b:if>

Aquí lo que hemos hecho es no mostrar la fecha en las páginas tipo Index. En los artículos, archivos, etc... sí que aparecerá.

Y como esto pues todo. Cada tipo de página puede ser personalizada enteramente, e incluso páginas concretas (una URL de nuestro sitio) también.