Hace poco Birdelo me preguntaba cómo lograr un efecto que usé en una plantilla (Randomness): ocultar la sidebar en posts individuales (de modo que sólo se mostrará el contenido).
El procedimiento es sencillo; basta con agregar una etiqueta condicional, y listo. Pero al escribir este tutorial, pensé en presentar otra posibilidad; más concretamente cómo mostrar dos diferentes sidebars: una en los posts individuales, y otra en el resto de páginas (incluyendo la principal).
Instalación
1. Desde nuestro Panel/Escritorio Blogger, nos dirigimos a Edición de HTML.
2. SIN expandir artilugios, buscamos la sección de nuestra sidebar, que debería verse algo así:
<div id="sidebar-wrapper"> <b:section class='sidebar' id='sidebar' preferred='yes'> Widgets </b:section> </div>
3. Arrriba de la primera línea en rojo, agregamos la siguiente etiqueta condicional:
<b:if cond='data:blog.pageType != "item"'>
4. Si solamente queremos ‘quitar’ la sidebar de los posts individuales, agregamos la siguiente línea debajo de la segunda línea en rojo, y aquí terminamos:
</b:if>
Si no, agregamos el siguiente código, y continuamos:
<b:else/>
<div id="sidebar-posts">
<b:section class='sidebar' id='sidebarposts' preferred='yes'/>
</div>
</b:if>
Estilos
Generalmente los estilos de nuestra sidebar (en general) suelen darse al contenedor de la sección (que tiene un ID específico; suele ser sidebar-wrapper). Los atributos para los widgets, encabezados, listas y demás se dan a la clase de la sección.
#sidebar-wrapper {
/* Atributos para el contenedor de la sidebar */
}
.sidebar h2 {
/* Encabezados */
}
.sidebar .widget {
/* Widgets */
}
.sidebar .widget-content {
/* Contenido del widget */
}
Es por esta razón que no he cambiado las clases de las secciones, sino sólamente el ID del contenedor (sidebar-posts). Esto significa que nuestros widgets y sus encabezados tendrán la misma configuración, sin necesidad de añadir nada más. Lo que sí podemos (y debemos) estilizar el contenedor de la sidebar de los posts individuales.
Una vez más, los estilos CSS, son todo lo que se encuentra antes de ]]</b:skin>.
#sidebar-posts {
/* Atributos para el contenedor de la sidebar en posts individuales */
}
Uso
El único ‘problema’ (relativo de todos modos) que hay es que desde nuestro Panel solamente podemos editar y mover los wigets de la sidebar en la página principal. Para los posts individuales, debemos agregarlos y ordenarlos directamente desde Edición de HTML. Ya en las páginas individuales, podemos editarlos con el ícono de Edición que Blogger proporciona.
Demo
Como siempre :D … acá un demo en funcionamiento.