| Código XML | Descripción / Uso principal |
|---|---|
| Estructura de Secciones y Gadgets | |
<b:section id='...' class='...'> |
Crea una zona contenedora de widgets en la maquetación (ej. header, sidebar, footer). |
<b:widget id='...' type='...' title='...'> |
Define un widget o gadget específico (ej. Blog, HTML, Header, Label). |
<b:widget-setting name='...'> |
Guarda configuraciones y parámetros estáticos dentro de un widget. |
<b:includable id='...'> |
Bloque de código o función reutilizable dentro de un widget (ej. id='main'). |
<b:include name='...' data='...'/> |
Llama y ejecuta un bloque <b:includable> previamente definido. |
<b:skin> / <![CDATA[ ... ]]> |
Contenedor donde se declaran las variables de diseño y los estilos CSS globales. |
<b:template-skin> |
Define los estilos CSS que se aplican a los aparatos dentro del diseñador de temas de Blogger. |
| Lógica y Control Dinámico | |
<b:if cond='...'> |
Evalúa una condición lógica para mostrar u ocultar elementos. |
<b:elseif cond='...'/> |
Evalúa una condición secundaria dentro de un bloque de control. |
<b:else/> |
Alternativa en caso de que las condiciones <b:if> resulten falsas. |
<b:loop values='data:...' var='...'> |
Bucle que itera sobre un conjunto de datos (lista de entradas, comentarios, etiquetas). |
<b:eval expr='...'/> |
Evalúa expresiones matemáticas, de texto o lógicas directamente en la plantilla. |
<b:class cond='...' name='...'/> |
Agrega dinámicamente una clase CSS a un elemento HTML según una condición. |
<b:attr name='...' value='...'/> |
Genera un atributo HTML de forma dinámica según condiciones o variables. |
expr:atributo='...' |
Asigna un valor o variable dinámicos a un atributo HTML (ej. expr:href='data:blog.homepageUrl'). |
| Variable de Datos | Información que imprime |
|---|---|
| Variables Globales y del Sitio | |
data:blog.title |
Nombre o título principal del blog. |
data:blog.pageTitle |
Título optimizado de la página actual (ideal para la etiqueta <title>). |
data:blog.homepageUrl |
URL de la página de inicio de tu sitio. |
data:blog.url |
URL exacta de la página actual que está cargando el visitante. |
data:blog.pageType |
Devuelve el tipo de página (item, static_page, index, archive, error_page). |
data:blog.searchLabel |
Nombre de la etiqueta actual cuando se explora una categoría. |
data:blog.canonicalUrl |
URL canónica para evitar contenido duplicado en buscadores. |
| Variables de Entradas y Artículos (data:post.) | |
data:post.title |
Título completo de la entrada. |
data:post.body |
Cuerpo principal con todo el contenido HTML de la entrada. |
data:post.url |
Enlace permanente (permalink) del artículo. |
data:post.author |
Nombre del autor de la publicación. |
data:post.timestamp |
Fecha o fecha/hora de publicación formateada. |
data:post.featuredImage |
URL de la primera imagen o imagen destacada del artículo. |
data:post.snippet |
Fragmento o resumen automático en texto plano de la entrada. |
data:post.labels |
Lista contenedora de etiquetas o categorías asignadas al post. |
data:post.commentSource |
Fuente/módulo para cargar el formulario de comentarios. |
| Etiqueta HTML | Función en la plantilla |
|---|---|
| Documento y Metadatos | |
<!DOCTYPE html> |
Define la especificación del documento bajo el estándar HTML5. |
<html xmlns:b='...' xmlns:expr='...'> |
Raíz del documento con los espacios de nombres del motor XML de Blogger. |
<head> |
Contenedor de metadatos, fuentes externas, enlaces a CSS y scripts principales. |
<body> |
Contenedor visible con toda la interfaz de la página. |
<meta charset='UTF-8'/> |
Define la codificación de caracteres universal para acentos y símbolos. |
<meta name='viewport' content='...'/> |
Configuración clave para que la plantilla sea 100% responsiva en móviles. |
<link rel='stylesheet' href='...'/> |
Enlaza fuentes externas (ej. Google Fonts) o librerías de estilos. |
| Maquetación Semántica y Cajas (Layout) | |
<header> |
Encabezado principal que contiene el logotipo, título del blog y menú. |
<nav> |
Envuelve los menús de navegación, enlaces de categorías o páginas. |
<main> |
Delimita la columna o área donde se despliega el contenido principal. |
<article> |
Envuelve el contenido individual de una entrada o noticia. |
<aside> |
Utilizado para las barras laterales (sidebars) y módulos secundarios. |
<footer> |
Pie de página para derechos de autor, políticas y enlaces secundarios. |
<div> |
Contenedor genérico para envolver bloques y estructurar cuadrículas CSS/Flexbox. |
<span> |
Contenedor de nivel en línea para aplicar estilos puntuales a fragmentos de texto. |
| Etiqueta HTML | Función y Uso Principal |
|---|---|
| Formato de Contenido y Elementos Multimedia | |
<h1> a <h6> |
Jerarquía de encabezados para estructurar títulos principales y subtítulos. |
<p> |
Delimita un párrafo de texto en bloque. |
<a href='...' target='_blank'> |
Crea hipervínculos internos o hacia páginas externas (con opción de abrir en nueva pestaña). |
<img src='...' alt='...'/> |
Inserta imágenes optimizadas especificando la ruta y el texto alternativo para SEO. |
<iframe> |
Utilizado para incrustar juegos web, reproductores de video o widgets externos. |
<ul> / <ol> / <li> |
Creación de listas no ordenadas (<ul>), numeradas (<ol>) y sus elementos individuales (<li>). |
<table> / <tr> / <td> |
Tablas para presentar especificaciones técnicas o datos organizados en columnas y filas. |
<blockquote cite='...'> |
Bloque visual resaltado para citas textuales o fragmentos de información destacada. |
<code> / <pre> |
Formato especial para mostrar fragmentos de código fuente respetando espacios y sangrías. |
