Destripando la plantilla

JMiur

Las plantillas de Blogger Beta son incompatibles con las plantillas normales, los códigos han cambiado por completo y si bien, algunos sólo son variaciones de los originales, se incluyen otros que implementan las nuevas funciones de edición.

La estructura básica de una plantilla nueva es la siguiente:

declaraciones normales

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC ....... >
<html xmlns='http://www.w3.org/1999/xhtml' ....... >

header de la página
<head>

incluye metadatos
<b:include data='blog' name='all-head-content'/>

título de la página
<title><data:blog.pageTitle/></title>

genera una instrucción STYLE
<b:skin><![CDATA[

variables accesibles a través de Font and Colors
<Variable name="bgcolor" description="Back Color"
type="color" default="#000" value="#000000">

.......
<Variable name="bodyfont" description="Text Font" type="font"
default="Trebuchet,Arial,Sans-serif"
value="Trebuchet,Arial,Sans-serif">

....... declaraciones de estilo CSS

las variables pueden usarse en las declaraciones, por ejemplo:
body {color: #000000; .......
puede expresarse como:
body {color: $bodyfont; .......

]]></b:skin>

</head>

cuerpo de la página
<body>

<div id='outer-wrapper'>

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> | <a href='#sidebar'>skip to sidebar</a>

</span>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
elemento HEADER
<b:widget id='Header1' locked='true' title='nombre' type='Header'/>
</b:section>
</div>

<div id='content-wrapper'>

columna izquierda
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
elemento POST
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

columna derecha
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
elemento PROFILE
<b:widget id='Profile1' locked='false' title='titulo' type='Profile'/>
elemento LIST
<b:widget id='TextList1' locked='false' title='titulo' type='TextList'/>

elemento LINKLIST
<b:widget id='LinkList1' locked='false' title='titulo' type='LinkList'/>
elemento PICTURE
<b:widget id='Image1' locked='false' title='titulo' type='Image'/>
elemento LABELS
<b:widget id='Label1' locked='false' title='titulo' type='Label'/>
elemento ARCHIVES

<b:widget id='BlogArchive1' locked='false' title='titulo' type='BlogArchive'/>
elemento HTML
<b:widget id='HTML1' locked='false' title='titulo' type='HTML'/>
</b:section>
</div>

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>

</div>

elemento FOOTER
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

</div>
</div>

</body>
</html>

el contenido de la instrucción WIDGET sólo es visible si se activa la opción 
Expand Widget Templates  en la solapa Template (Layouts) / Edit HTML

Instrucciones del HEADER

<b:include name='nombre' data='datos' />
"incluye" un conjuntos de datos
name (obligatorio) nombre único
data (opcional) expresión o datos a pasar

<b:skin>
.......
<Variable name='nombre description='texto' type='tipo' default='valor'/>

....... códigos CSS .......
</b:skin>
esta estructura contiene las declaraciones de estilo CSS y las variables que
definen cada una de las fuentes y los colores
name nombre único para la variable
description nombre descriptivo
type puede ser font o color

default valor por defecto
las variables pueden usarse para definir los estilos, por ejemplo:
color: $variable_name

Instrucciones del BODY

<b:section id='nombre' class=' tipo'
maxwidgets="num" showaddelement="yn" growth ="tipo">
.......
</b:section>
define cada sección de la plantilla donde:
id (obligatorio) nombre único
class (opcional) nombre de la clase
pueden ser: navbar header main sidebar footer o cualquier otro

maxwidgets (opcional) cantidad máxima de widgets permitidas
showaddelement (opcional) se usa para edición, puede ser yes o no
growth (opcional) ubicación de widgets horizontal o vertical
preferred es un atributo no documentado
cada sección contendrá una o más widgets y será reemplazada por una etiqueta 

<DIV> con el mismo atributo ID

<b:widget id="nombre" type='tipo' locked=" yn" title="texto" pageType="tipo">
.......
</b:widget>
una widget es un contenedor cuyo contenido puede ser manejado en la solapa Page
Elements, los datos son guardados en la base de datos de Blogger y son cargados
en forma dinámica

id (obligatorio) nombre único
type (obligatorio) indica el tipo de contenido
pueder ser: BlogArchive Blog Feed Header HTML Image LinkList List
Logo BlogProfile Navbar
locked (opcional) indica fija o editable (yes o no)
title (opcional) título o un nombre por defecto

pageType (opcional) indica en qué páginas se muestra
pueden ser: all archive main item
cada widget será reemplazada por una etiqueta <DIV>; con el mismo atributo ID

Instrucciones de DATOS

los datos individuales son accesibles a través de las instrucciones:

<data:tipo/>
los datos contenidos en colecciones son accesibles a través de las instrucciones:
<data:tipo.atributo/>
en cualquier caso, el tipo y los atributos dependen del widget donde se encuentran