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.