Etiquetas b:skin y b:template-skin

b:includable Blogger

Las etiquetas b:skin y b:template-skin son elementos exclusivos de la cabecera del blog, en donde el contenido está compuesto por declaraciones de variables que interactúan con el Diseñador de plantillas de Blogger.


b:skin

Es obligatoria y solo puede haber una etiqueta b:skin por plantilla, de lo contrario el documento xml será incorrecta. También requiere obligatoriamente una etiqueta CDATA, lo que nos impide usar etiquetas b:language, pero se utiliza un lenguaje alternativo en su lugar:


<b:skin><![CDATA[ ... ]]></b:skin>

Esta etiqueta se usa para almacenar variables, que posteriormente se utilizan en el código css o como etiquetas html. También puede contener css puro, sin la necesidad de declarar variables.


b:template-skin

Al contrario de b:skin, esta etiqueta no es obligatoria, generalmente se reserva para agregar estilos a la pestaña "Diseño" del panel de administración de Blogger. Requiere obligatoriamente una etiqueta CDATA:


<b:template-skin><![CDATA[ ... ]]></b:template-skin>

Variables

Las variables se pueden usar en la etiqueta b:skin y b:template-skin. Al declararlas, podemos almacenar datos que se pueden solicitar en cualquier parte del blog. La sintaxis es la siguiente:


<Variable name="[name]" description="[string]" type="[type]" default="[value]" value="[value]"/>

En la siguiente tabla se encuentran los valores correspondientes a cada atributo que soporta una variable de Diseño en Blogger.


name Obligatorio. El nombre de la variable para extraer los datos. Solo puede contener letras, números y . (punto).
description Obligatorio. Descripción. Si la variable es del tipo color, length o font. Será visible desde el Diseñador de plantillas.
type Obligatorio. Determina el tipo de variable a almacenar.
default Obligatorio. El valor especificado por defecto cuando se presiona "Restaurar configuración" en el Diseñador de plantillas.
value Obligatorio. El valor actual de la variable. Se actualiza e imprime cuando el usuario cambia los valores desde el Diseñador de plantillas.
color Opcional. Para variables tipo background. El valor debe ser un color hexadecimal, rgb, rgba o el nombre de una variable tipo color.
family Opcional. Para variables tipo font. El valor debe corresponder al nombre de una fuente.
size Opcional. Para variables tipo font. El valor debe corresponder al tamaño de fuente.
min Opcional. Para variables tipo length. El valor debe corresponder al valor mínimo permitido.
max Opcional. Para variables tipo length. El valor debe corresponder al valor máximo permitido.
hideEditor Opcional. Oculta la variable en el Diseñador de Plantillas. Solo valido para el tipo color, length o font.

Tipos de variables

El tipo define el valor de la variable, por ejemplo, una variable del tipo font, no puede contener valores del tipo color. La siguiente tabla contiene los tipos disponibles.


color El valor debe corresponder a un color hexadecimal.
font El valor debe contener font-style, font-weight, font-size y font-family.
length El valor debe corresponder a la longitud expresado en px o em.
background El valor debe contener background-color, background-image, background-repeat, background-position y background-attachment.
url El valor debe ser una url. No es visible desde el Diseñador de Blogger.
string El valor debe ser cualquier cadena de caracteres.
automatic El valor es automatico.

Grupos de variables

Al declarar múltiples variables, se crear una nueva pestaña en el diseñador de plantillas. La etiqueta group tiene la peculiaridad de agrupar variables en una misma pestaña. Su sintaxis es la siguiente.


<Group description="[string]" selector="[selector]">
   {...}
</Group>

En la siguiente tabla se encuentran los atributos que definen a la etiqueta Group.


description Descripcion del grupo. Se muestra como el nombre de la pestaña desde la opción Avanzado.
selector Nombre de la etiqueta html o clases en css. Sirve para indicar la área de modificación en el Diseñador de Plantillas.

Esta etiqueta no es obligatoria y de usarse, sólo puede contener variables, cualquier código extra marcara un error en el documento xml.


Salida de datos

Para extraer los datos de una variable, solo se necesita escribir el valor del atributo name y agregar el prefijo $. En el siguiente ejemplo he extraído el valor de una variable color de nombre mycolor:


body { color: $mycolor }

Si el nombre de la variable contiene un punto, por ejemplo my.color, al momento de llamarla se deben utilizar paréntesis de la siguiente manera:


body { color: $(my.color) }

De la misma forma, si la variable contiene datos específicos de su tipo, es necesario utilizar también los paréntesis:


body { font-family: $(container.font.family) }

Si se desea utilizar los datos de la variable fuera de la etiqueta b:skin o b:template-skin, se utiliza la etiqueta data:skin.vars mas el nombre de la variable.


<data:skin.vars.mycolor/>

La variable del ejemplo container.font contiene un punto. En estos casos el punto se reemplaza por un subguión:


<data:skin.vars.container_font/>

Esta entrada se complementó gracias a la ayuda de Blogger Code, si quieres aprender mas sobre las etiquetas de estilo te invito a leer b:skin / b:template-skin.