Sidebar y "widgets"

Las "sidebar", traducido al español, quiere decir: "side": lado, lateral; "bar": barra.
O sea: que son las "barras" que hay en los laterales del blog, junto a las entradas. Es donde colocamos todos nuestros "chismes": las etiquetas, los links, los comentarios, las referencias, etc: todo lo que no es estrictamente "entradas del blog".

En este blog tengo dos sidebar: una a la izquierda de las entradas, en la que tengo puestas las correspondencias de Smileys, los iconos de referencia de los feed de entradas y comentarios, las etiquetas multi-estilo y los Artículos por etiqueta.

Mi segunda sidebar está a la derecha de las entradas, y ahi tengo puestos los Comentarios, mi Perfil y el Archivo del Blog.

La configuración del ancho, color, fondo, posición y demás de las sidebar, las encontramos en la Edición de HTML de la plantilla, tras la Definición de Variables.

Para encontrar en la plantilla los objetos o widgets que hay dentro de ellas y poder modificarlos, o añadir más cosas en alguna de esas sidebar, tenemos que ir a Edición de HTML y picar en "Expandir plantilla de Artilugios": ésto quiere decir que nos va a mostrar todos los "chismes"-objetos-artilugios-widgets que tenemos en el blog, incluídos los de la sidebar (p.e.: comentarios, archivo del blog, etiquetas multi-estilo, etc.).

Una vez hecho ésto, bajamos la plantilla hasta donde se encuentran nuestras sidebar, que se pueden llamar de muchas formas, dependiendo de la plantilla y de las columnas que tenga: en mi plantilla, mis sidebar se llaman:

.- div id='sidebar-wrapper', que es donde tengo los Smileys, los feed y las Categorías. Y como la he puesto muy cerquita del acabecera del blog, pues está pegadita al "header-wrapper" (Cabeceta del Blog: donde está el título, y donde suelo poner la barra de menú)

.- Bajo el post-footer-line-3, es decir, terminado el elemento "Navigation", tengo mi sidebar derecha, que aparece así:
div id='sidebar-wrapper'
b:section class='newsidebar' id='newsidebar' preferred='yes'

Aquí tengo el botón de ida a "Ayuda&Kaos", los Comentarios, mi Perfil y el Archivo.

Dentro de cada una de estas secciones de sidebar, hay un elemento que no aparece en el resto de la plantilla: LOS B:WIDGET. Cada uno de nuestros "chismes" (comentarios, archivo, etiquetas, feed, links...) en el blog que aparecen en los laterales de las entradas, están configurados en la sidebar y con el nombre de WIDGET.
Un widget se abre con un b:widget, la calse y el título. Y cierra con este signo /. El último widget de la sidebar cierra, además, con el cierre de la sección y de la sidebar... es decir: detrás del cierre del último widget (/b:widget) encontraremos un "/b:section" y un "/div".

Así:

<div id='sidebar-wrapper'>

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

<b:widget id='HTML8' locked='false' title='Ayuda&amp;Kaos' type='HTML'>

<b:includable id='main'>

<!-- only display title if it's non-empty -->

<b:if cond='data:title != ""'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>



<b:include name='quickedit'/>

</b:includable>

</b:widget>

Esta es mi sidebar derecha: aquí podéis ver cómo comienza la sidebar, con la sección. Y, dentro de ella, el comienzo de widget del botón que direcciona a Ayuda&Kaos. Y los datos necesarios: la id-identificación del objeto: HTML, con un número, el "tile" o título, que es el que le hemos puesto a nuestro objeto, "chisme", artilugio" o como queráis llamarlo, y el "type", es decir, el tipo, que aquí es un HTML.. ý dependiendo de los que tengáis será un Feed, una Label, un Text, una Image...

Veis que el objeto abre SIEMPRE con un b:widget y, claro... hay que darle fín de la misma manera: con la referencia b:widget, pero con un cierre "/".

Ahora supongamos que el objeto "Ayuda&Kaos" es el único que tengo en mi sidebar derecha. O que es el último de todos los objetos que tengo allí. Entonces no terminaría sólo con el /b:widget... detrás tendría que "avisar" que "cierra" esa sidebar y su contenido, añadiendo un cierre de b:section de la sección y del div de la sidebar. Así:

<div id='sidebar-wrapper'>

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

<b:widget id='HTML8' locked='false' title='Ayuda&Kaos' type='HTML'>

<b:includable id='main'>

<!-- only display title if it's non-empty -->

<b:if cond='data:title != ""'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>



<b:include name='quickedit'/>

</b:includable>

</b:widget>

</b:section>

</div>

Y ahora, supongamos que quiero añadir otra cosa en esta sidebar... otro objeto-widget.

Pues sólo tendría que añadir el nuevo b:widget detrás del cierre del objeto "AyudaKaos (o delante, si queremos que se vea arriba de este widget). P.e.... vamos a añadir los Smileys:

<div id='sidebar-wrapper'>

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

<b:widget id='HTML8' locked='false' title='Ayuda&Kaos' type='HTML'>

<b:includable id='main'>

<!-- only display title if it's non-empty -->

<b:if cond='data:title != ""'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>



<b:include name='quickedit'/>

</b:includable>

</b:widget>


<b:widget id='HTML10' locked='false' title='Smileys' type='HTML'>

<b:includable id='main'>

<!-- only display title if it's non-empty -->

<b:if cond='data:title != ""'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>



<b:include name='quickedit'/>

</b:includable>

</b:widget>





</b:section>

</div>

Como terminaría la sección y la sidebar con los Smileys, añadiría detrás del cierre del widget, el cierre de la sección (/b:section) y el de la sidebar (/div).

Es facilín :)... sólo hay estudiar la plantilla y sale todo solo... de verdad que es más fácil hacerlo que decirlo. Y entenderlo mirando la plantilla que leyendo por ahí las explicaciones ;)