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.

En breves rasgos, estos posts versión miniatura suelen utilizarse como ‘notas rápidas’, pequeñas, referenciales, de aviso, notificación, etc. que no necesariamente requieren de un post tradicional. Se caracterizan por tener un diseño y estructura distinta, aunque son técnicamente sólo posts con una categoría diferente (ej. Notas rápidas, Actualizaciones, Miniposts, etc.). En la imagen de arriba, vemos cómo Francisco los ha diseñado para Blog and Web.

Hasta hace poco creía que lograr esto en Blogger era difícilmente posible, pero una vez que me topé con un post en Blogger Buster, y más recientemente éste de Vagabundia, me puse a jugar con los códigos. (Suene o no geek, es divertido). En Vagabundia, lo que muestra JMiur es básicamente cómo utilizar estos miniposts fuera de la secuencia cronológica de los posts tradicionales; yo, en cambio, me he enfocado más en cómo cambiar su estructura (y diseño) dentro de dicha secuencia (más como se usa en Blog and Web, digamos).

Instalación

1. Creamos un post con la categoría minipost.

2. Desde Edición de HTML (Panel » Diseño), expandimos artilugios.

3. En el siguiente código, agregamos lo que está resaltado.

    <b:loop values='data:posts' var='post'>

      <b:loop values='data:post.labels' var='label'>
        <b:if cond='data:label.isLast == &quot;true&quot;'>
        <b:if cond='data:label.name != &quot;minipost&quot;'>

        <b:if cond='data:post.dateHeader'>

          <h2 class='date-header'><data:post.dateHeader/></h2>
        </b:if>
          <b:include data='post' name='post'/>

        <b:else/>
          <b:include data='post' name='minipost'/>

        </b:if>
        </b:if>
      </b:loop>

      <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <b:include data='post' name='comments'/>

      </b:if>
      <b:if cond='data:post.includeAd'>
        <data:adEnd/>
        <data:adCode/>
        <data:adStart/>
      </b:if>

      <b:if cond='data:post.trackLatency'>
        <data:post.latencyJs/>
      </b:if>
    </b:loop>

4. Buscamos la siguiente línea:

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

y debajo de ella, pegamos el siguiente código:

<b:includable id='minipost' var='top'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
  <div class='minipost home'>
    <div class='date'><data:post.dateHeader/></div>

    <div class='body'>
      <data:post.body/>
      <div class='clear'/>
    </div>
    <div class='meta'>

      <a expr:href='data:post.url'>permalink</a> |
      <a expr:href='data:post.url + &quot;#comments&quot;'>comments</a>
      <b:include data='post' name='postQuickEdit'/>
    </div>

  </div>

<b:else/>

  <div class='minipost item'>
    <div class='date'><data:post.dateHeader/></div>

    <div class='title'>
      <a expr:href='data:post.url'>
        <data:post.title/>
      </a>
    </div>

    <div class='body'>
      <data:post.body/>
      <div class='clear'/>
    </div>
    <b:include data='post' name='postQuickEdit'/>

  </div>
</b:if>

</b:includable>

De esta forma, habremos definido cómo será la estructura de los miniposts en las páginas del blog, y los posts individuales.

En este ejemplo, en los miniposts que se verán en la página principal, archivos y categorías, se mostrará solamente la fecha, el contenido, y dos enlaces (el enlace permanente al minipost, y el enlace a los comentarios). En los miniposts individuales, se mostrará la fecha, el título y el contenido.

— Podemos usar Vista Previa para tener una idea de cómo se verán los miniposts ahora.

Estilos

Los estilos (colores, tamaños, fondos, fuentes, etc.) los definimos con CSS (el código antes de ]]</b:skin>, utilizando las clases de cada contenedor:

.minipost.home { /* Miniposts en la página principal, archivos, y categorías */ }
  .minipost.home .date { /* Estilos para la fecha */ }
  .minipost.home .body { /* Estilos para el cuerpo del minipost */ }
  .minipost.home .meta { /* Estilos para el 'footer' del minipost */ }

.minipost.item { /* Estilos para los miniposts individuales */ }
  .minipost.item .date { /* Estilos para la fecha del minipost individual */ }
  .minipost.item .title { /* Estilos para el título del minipost individual  */ }
  .minipost.item .body { /* Estilos para el cuerpo del minipost individual */ }

Demo

Acá un demo en funcionamiento.

Explicación

Lo que he hecho es simplemente agregar un “includable” (digamos que son contenedores o secciones “Blogger”) que contenga el mensaje con ciertas condiciones,… y un “include” que, como he mencionado antes, activa o llama al contenedor. En fin, a continuación los pasos a seguirse:

1. Vamos a Edición de HTML (desde Panel – Diseño), y expandimos artilugios.

2. Buscamos la siguiente línea:

<b:includable id='main' var='top'>

Sobre ella pegaremos el siguiente código (con las variaciones respectivas):

<b:includable id='mensaje-etiqueta' var='post'>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:if cond='data:post.labels'>

      <b:loop values='data:post.labels' var='label'>
        <b:if cond='data:label.name == &quot;etiqueta&quot;'>
          <div class="mensaje-etiqueta">
            El mensaje a mostrarse.

          </div>
        </b:if>
      </b:loop>
    </b:if>
  </b:if>
</b:includable>

• Reemplazamos “etiqueta” por la etiqueta que deseamos. Debe estar escrita correctamente; las mayúsculas y minúsculas son importantes (etiqueta no es igual a ETIQUETA o Etiqueta).
• Con la clase (mensaje-etiqueta), podemos darle estilo al contenedor, desde el CSS de nuestra plantilla [el código que se encuentra entre <b:skin> y </b:skin>]:

  .mensaje-etiqueta {background: black; color: white;}

• Obviamente, donde está el texto en azul irá nuestro mensaje.

3. Ahora buscamos esta línea,

<data:post.body/>

y sobre ella pegamos la siguiente:

<b:include data='post' name='mensaje-etiqueta'/>

4. Con esto habremos terminado. Hacemos click en Vista previa solo para saber si Blogger no nos avisa de algún error. No veremos nada en la página principal de nuestro blog, ya que el mensaje sólo aparece en posts individuales. Si todo parece trabajar correctamente, guardamos cambios…

¡y listo!

Demo

Acá un ejemplo en funcionamiento.

Hace unos meses, Rô me preguntaba si sabía cómo lograr un efecto que se muestra en assessmyblog.blogspot.com, que básicamente resume los datos personales de un post (título, número de/enlace a comentarios, etiquetas, fecha de publicación, etc.) en la sidebar y no (o además de) en el footer del post , como es tradicional.

Explicación

En un post anterior, explicaba cómo lograr esto con el “status message” de Blogger. El principio es el mismo: utilizar el widget “Blog”, en este caso Blog2, y que éste se muestre en la sidebar y no en el área principal de los posts en nuestros blogs. Sin más explicaciones preambulares, he aquí los pasos para lograr lo que queremos:

1. Desde Edición de HTML en nuestro panel, sin expandir artilugios (para no complicar las cosas), buscamos la siguiente línea:

<b:section class='sidebar' id='sidebar' preferred='yes'>

O alguna parecida. Ésta es básicamente la sección de nuestra sidebar.

2. Justo debajo de ella, pegamos el siguiente código (que explicaré detalladamente):

<b:widget id='Blog99' locked='false' title='Blog Meta' type='Blog'>

<b:includable id='main' var='top'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>

<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
</b:loop>
</b:if>
</b:includable>

<b:includable id='post' var='post'>
<div class='meta'>

<div class='title'>Estás leyendo: "<data:post.title/>".</div>
<div class='comments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:post.numComments/> <data:top.commentLabelPlural/>

</a>
</div>
<div class='labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>

</b:loop>
</b:if>
</div>
<div class='date'>
Fecha de publicación: <data:post.dateHeader/>.
</div>
</div>

</b:includable>

</b:widget>

3. Guardamos y listo. Lo básico está hecho. Ahora, las explicaciones pertinentes y la parte de estilo.

• El contenedor con clase meta es el contenedor general, que dentro de sí tendrá otros contenedores, los cuales mostrarán el título del post, los comentarios, las etiquetas, y la fecha de publicación respectivamente.
• El contenedor con clase title, muestra exactamente el título de la entrada (que en Blogger es: <data:post.title/>). Si nos fijamos, he añadido ‘Estás leyendo: “…”.’ Eso puede ser cambiado fácilmente.
• El contenedor con clase comments, muestra el enlace a los comentarios (se muestra así: “X comentarios”).
• El contenedor con clase labels, muestra las etiquetas que tiene el post. No hay mucha ciencia ahí.
• El contenedor con clase date, muestra la fecha en que fue publicado el post (en Blogger eso es: <data:post.dateHeader/>). Ahí he añadido “Fecha de publicación: “…”.’ Puede ser cambiado, claro.

Estilos

Como es claro, cada uno de estos contenedores puede ser estilizado a nuestro gusto, con CSS (recordemos que el CSS es todo el código escrito entre <b:skin> y </b:skin>). Estos son los pequeños cambios hice en mi blog de pruebas:

.meta {
background: red;
font-family: 'Century Gothic', sans-serif;
padding: 5px;
margin: 10px 0 0;
}
	.meta .title {background: blue; color: white; padding: 3px;}
	.meta .comments {background: green; color: white; padding: 3px;}
	  .meta .comments a {color: white; text-decoration: underline;}
	.meta .labels {background: orange; color: black; padding: 3px;}
	  .meta .labels a {color: white;}
	.meta .date {background: purple; color: white; padding: 3px;}

Como ven, son propiedades básicas. Todo está en nuestra imaginación.

Demo

Acá un ejemplo en funcionamiento.

En El Escaparate, lo llaman el mensaje de las etiquetas. Yo le dejo el nombre con que Blogger lo bautizó, porque también aparece ahí el mensaje de búsquedas, así que “status-message” (o mensaje de estado) está bien.

Una de las cosas que menos me gusta de Blogger es esa barrita que dice “Mostrando entradas con la etiqueta X. Mostrar todas las entradas.” En realidad es el diseño de Blogger el que no me gusta… O al menos eso pensaba hasta ayer, cuando me puse a pensar que quizás no se verían tan mal si estuviera en la sidebar del blog. Luego me dije (hablo solo a veces ): “¿cómo hago eso?”

Explicación

Veamos: hay un principio sencillo.

Esta parte del blog está definida en el widget/gadget “Blog1″ -que es en realidad el área de los posts- de nuestra plantilla. Eso quiere decir que, si expandimos artilugios desde la Edición de HTML de nuestro blog, veremos dos códigos importantes.

1. El primero es un código include que “llama”/activa al código includable -que es donde básicamente se define esta área.
2. El código includable.

<b:include data='top' name='status-message'/>

y…

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>

</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>

</b:if>
</b:includable>

1. En esencia, entonces, el primer paso sería tan sólo borrar el código include. Así habremos quitado del área de los posts al mágico mensajito de Blogger. Pero, de nuevo, ¿cómo hacemos para que aparezca en la sidebar del blog? Así como hay un gran widget/gadget llamado “Blog1″, también puede haber uno llamado “Blog2″… y en nuestra sidebar.
2. Buscamos el siguiente código (o alguno bastante parecido ya que suele cambiar dependiendo de la plantilla):

   <b:section class='sidebar' id='sidebar' preferred='yes'>

   … y justo abajo pegamos lo siguiente:

   <b:widget id='Blog2' locked='false' title='Blog Posts' type='Blog'>
   
   <b:includable id='status-message'>
   <b:if cond='data:navMessage'>
   
   <div class='status-msg-wrap'>
   <div class='status-msg-body'>
   <data:navMessage/>
   </div>
   </div>
   <div style='clear: both;'/>
   </b:if>
   </b:includable>
   
   <b:includable id='main' var='top'>
   <b:include data='top' name='status-message'/>
   </b:includable>
   
   </b:widget>

3. Definimos el estilo del mensajito, justo antes de ]]></b:skin>, de la siguiente forma:

   .status-msg-wrap{ /*el contenedor donde se encuentra el mensaje*/ }
   
   .status-msg-body{ /*básicamente el mensaje*/
   text-align:center;
   width:auto;
   display:block;
   font-size:12px;
   margin-bottom:30px;
   background: #12120D;
   color: #fff;
   }

Et voilà!