Mostrar elementos condicionales en la sidebar

La sidebar del blog suele ser una de las cosas más "pesadas" a la hora de cargarlo. Solemos colocarles muchas cosas ... tal vez, demasiadas pero, es parte de nuestra idiosincracia.

En Blogger, hay una forma bastante sencilla de colocar condiciones de tal manera que el blog se muestre diferente en función del tipo de página donde nos encontramos. Básicamente, lo que podemos detectar es si estamos en una página de entradas individuales o no; para eso, hay un dato interno que lo indica:

data:blog.pageType = &quote;item&quote;

Si esto es así, entonces, también sería sencillo hacer que ciertos elementos de la sidebar se muestren o se oculten según sea el tipo de página.

Todos los elementos que agregamos tiene la misma estructura; por ejemplo, si agregáramos un elemento HTML con el título MI ELEMENTO; podría verse esto:

<b:widget id='HTML7' locked='false' title='MI ELEMENTO' type='HTML'>
<b:includable id='main'>
  [ ... el código interno ... ]
</b:includable>
</b:widget>

HTML7 es el ID que variará de acuerdo a la cantidad que tengamos agregados y el atributo type será diferente si se trata de otro tipo de elemento (Label, Archive, Feed, etc).

Blogger no nos deja colocar código antes de b:widget así que colocaremos la condición adentro:

<b:widget id='HTML7' locked='false' title='MI ELEMENTO' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quote;item&quote;'>
  [ ... el código interno ... ]
<b:else/>
  <style>#HTML7 {display: none;}</style>
</b:if>
</b:includable>
</b:widget>

En el ejemplo, el elemento HTML7 sólo se mostrará en las páginas individuales y ya que a veces, aunque no tenga contenido, el elemento tiene "tamaño"; reforzamos la instrucción ocultándolo por completo.

La condición inversa sería no mostrar el elemento en las páginas individuales; para eso, lo más fácil es usar:

<b:if cond='data:blog.pageType != &quote;item&quote;'>

El armado de la página de forma condicional no está limitada a los elementos individuales. Podemos condicionar casi cualquier cosa. Este esquema nos permitiría tener sidebars diferentes para las páginas individuales y la página principal:

<b:if cond='data:blog.pageType != &quote;item&quote;'>
  <div id='sidebar-wrapper'>
  <b:section class='sidebar' id='sidebar' preferred='yes'>
    [ ... el código de los diferentes elementos de la sidebar de la página principal ... ]
  </b:section>
  </div>
<b:else/>
  <div id='sidebar-wrapper-2'>
  <b:section class='sidebar' id='sidebar-2' preferred='yes'>
    [ ... el código de los diferentes elementos de la sidebar para entradas individuales ... ]
  </b:section>
  </div>
</b:if>

Moraleja: cualquier cosa es posible y el resto queda librado a la imaginación de cada uno.