Las etiquetas <b:skin> y <b:template-skin> contienen estilos y variables de diseño que interactúan con el diseñador de plantillas de Blogger. Deben especificarse entre <head>...</head> de la plantilla XML y no se pueden anidar.


Sintaxis

La etiqueta <b:skin> es obligatoria en todos los temas. <b:template-skin> es opcional:


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

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

Variables

La variables sirven para personalizar rápidamente una plantilla utilizando el Diseñador de plantillas de Blogger. El uso de variables y la cantidad depende de cada tema. Todas las variables de un tema se deben especificar dentro de la etiqueta <b:skin>. La sintaxis de una variable es la siguiente:


<Variable name="name" description="description" type="type" default="value" value="value"/>

La siguiente tabla contiene la lista de atributos que puede contener una variable.


Atributo Descripción Importancia
name Nombre de la variable. Solo puede contener letras, números o un punto. Obligatorio
description Descripción de la variable que se mostrará en el Diseñador de Blogger Obligatorio
type Tipos de variables. Puedes elegir entre: color font length background url string automatic Obligatorio
default El valor predeterminado de la variable cuando se restaura la configuración de la plantilla. Obligatorio
value El valor actual de la variable, es el valor que cambia al realizar una modificación en el diseñador de plantillas de Blogger. Obligatorio
color Se usa con las variables tipo background, especifica un color hexadecimal, rgb, rgba o el nombre de una variable tipo color Opcional
red Se usa en una variable tipo color, especifica un número entre 0 al 255 Opcional
green Se usa en una variable tipo color, especifica un número entre 0 al 255 Opcional
blue Se usa en una variable tipo color, especifica un número entre 0 al 255 Opcional
alpha Se usa en una variable tipo color, especifica un número entre 0.0 al 1.0 Opcional
family Se usa en una variable tipo font, especifica el nombre de una fuente Opcional
size Se usa en una variable tipo font, especifica el tamaño de la fuente Opcional
min Se usa en una variable tipo length, especifica el tamaño mínimo a alcanzar en pixeles (px) Opcional
max Se usa en una variable tipo length, especifica el tamaño máximo a alcanzar en pixeles (px) Opcional
hideEditor Oculta la variable en el Diseñador de plantillas de Blogger Opcional

Grupos de variables

Estas etiquetas sirven para agrupar variables que posteriormente se mostraran como secciones en el Diseñador de plantillas de Blogger.


<Group description="description" selector="selector">
   ...
</Group>

La etiqueta para agrupar variables no es obligatoria, pero si se especifica, solo puede contener variables. La siguiente tabla contiene la lista de atributos que puede contener.


Atributo Descripción Importancia
description Breve descripción del grupo que se mostrará en las pestaña en el diseñador de Blogger Obligatorio
selector Nombre de etiqueta html, clase o identificador Opcional

Ejemplo

El siguiente ejemplo contiene una declaración simple de variables. La primera variable contiene un color clave, mientras que las otras dos forman parte de un grupo.


<b:skin><![CDATA[
   <Variable name="keycolor" description="Main Color" type="color" default="#2196f3" value="#2196f3"/>
   <Group description="Accents" selector="body">
      <Variable name="main.bg" description="Main" type="color" default="#e0e0e0" value="#e0e0e0"/>
      <Variable name="main.color" description="Main color" type="color" default="#23a6b3" value="#23a6b3"/>
   </Group>
]]></b:skin>

Mas detalles y ejemplos en: Design tags Blogger Code PE.