Explicación Completa de Etiquetas, Variables y Cómo Usarlas para Crear Temas en Blogger

Fecha de Publicación: 6/29/2025 Publicador Por: Rguezpjm 0

Si te dedicas a diseñar y personalizar temas para Blogger o si quieres realizar tu propio diseño, aqui te explicare a fondo las etiquetas, variables y datos que maneja el sistema de Blogger. En este articulo te explicare de forma clara y sencilla sobre los principales codigos y etiquetas que puedes utilizar para crear temas modernos, funcionales y optimizados para SEO.

Esta guia es un extracto simplificado del Blog original Blogger Code PE, donde se profundiza en las referencias tecnicas del sistema de plantillas de Blogger. Aqui encontraras las definiciones, tipos y ejemplos practicos que te ayudaran a implementar correctamente las funcionalidades de tus temas.

¿Por qué es importante conocer estas etiquetas y variables en Blogger?

Blogger utiliza un sistema de plantillas basado en XML y etiquetas personalizadas que permiten insertar datos dinámicos y condicionales para mostrar contenido, configurar vistas, mostrar widgets, y mucho más. Sin embargo, la documentación oficial no siempre es fácil de interpretar, por eso esta referencia práctica es útil para desarrolladores y diseñadores que quieren optimizar sus plantillas sin cometer errores.

Dominar estas etiquetas no solo te permite crear temas más personalizados y profesionales, sino también mejorar la experiencia de usuario y el SEO de tu blog, al controlar mejor cómo se muestran los títulos, descripciones, enlaces canónicos, fechas, autores y comentarios.

Referencias principales: Etiquetas, Variables y su uso en Blogger

A continuación, se muestra una tabla con las etiquetas y variables más comunes, explicando qué hacen, su tipo de dato y un ejemplo básico de cómo usarlas dentro de las plantillas de Blogger.
Argumento / Etiqueta Descripción Tipo Ejemplo de Uso
view.title Muestra el título de la vista o página actual String <data:view.title/>
view.title.escaped Título escapado para evitar problemas con caracteres especiales en HTML String <data:view.title.escaped/>
view.description Descripción general de la vista String <data:view.description/>
view.description.escaped Descripción escapada para HTML seguro String <data:view.description.escaped/>
view.type Define el tipo de página (inicio, post, archivo, búsqueda, etc.) String <data:view.type/>
view.url.canonical URL canónica para mejorar el SEO y evitar contenido duplicado String <data:view.url.canonical/>
view.isHomepage Indica si la vista actual es la página principal Boolean <b:if cond='data:view.isHomepage'>...</b:if>
view.isPost Indica si se está mostrando una entrada individual Boolean <b:if cond='data:view.isPost'>...</b:if>
view.isSearch Indica si la vista corresponde a una página de resultados de búsqueda Boolean <b:if cond='data:view.isSearch'>...</b:if>

Más ejemplos y variables útiles para personalizar tus temas

Además de las variables principales para identificar el tipo de vista y su contenido, Blogger ofrece configuraciones para mostrar u ocultar elementos como fecha, autor, etiquetas, comentarios, botones para compartir y estilos visuales.

Estas configuraciones son clave para que puedas crear temas flexibles que se adapten a diferentes estilos y necesidades.

Argumento / Variable Descripción Tipo Ejemplo de Uso
showDateHeader Controla la visualización del encabezado con la fecha del post Boolean <b:if cond='data:showDateHeader'>...</b:if>
showAuthor Muestra el nombre del autor del post Boolean <b:if cond='data:showAuthor'>...</b:if>
showLabels Controla la aparición de etiquetas o categorías en el post Boolean <b:if cond='data:showLabels'>...</b:if>
showShareButtons Habilita botones para compartir el contenido en redes sociales Boolean <b:if cond='data:showShareButtons'>...</b:if>
style.textcolor Define el color del texto en la plantilla String (color hexadecimal o nombre) <data:style.textcolor/>
style.bgcolor Define el color de fondo de la plantilla String (color) <data:style.bgcolor/>

Uso práctico de etiquetas para posts y comentarios

Dentro de cada post, Blogger maneja varias variables que permiten mostrar contenido, metadatos y administrar comentarios. Por ejemplo, para mostrar el título y el cuerpo de una entrada puedes usar:

Variable Descripción Tipo Ejemplo de Uso
posts.dateHeader Fecha del post, solo aparece si es el primer post del día String (fecha) <data:posts.dateHeader/>
posts.id ID numérico único del post Integer <data:posts.id/>
posts.title Título del post String <data:posts.title/>
posts.snippets.long Resumen de la Entrada de 200 caracteres String <data:posts.snippets.long/>
posts.snippets.short Resumen de la Entrada de 100 caracteres String <data:posts.snippets.short/>
posts.body Contenido principal del post HTML/String <data:posts.body/>
posts.author Nombre para mostrar del autor del post String <data:posts.author/>
posts.url URL permanente (permalink) del post String (URL) <data:posts.url/>
posts.timestamp Fecha y hora del post String (fecha/hora) <data:posts.timestamp/>
posts.labels Lista de etiquetas del post (cada etiqueta tiene propiedades) Array [Object] Iterar con <b:loop values='data:posts.labels' var='label'>
posts.labels.name Texto del nombre de la etiqueta String <data:label.name/>
posts.labels.url URL que lista posts con esa etiqueta String (URL) <data:label.url/>
posts.labels.isLast Indica si es la última etiqueta (para separar con comas) Boolean <b:if cond='data:label.isLast'>
posts.allowComments Indica si se permiten comentarios en el post Boolean <b:if cond='data:posts.allowComments'>
posts.numComments Número de comentarios en el post Integer <data:posts.numComments/>
posts.showBacklinks Indica si se muestran backlinks Boolean <b:if cond='data:posts.showBacklinks'>
posts.numBacklinks Número de backlinks Integer <data:posts.numBacklinks/>
posts.addCommentUrl URL para agregar un comentario String (URL) <data:posts.addCommentUrl/>
posts.emailPostUrl URL para enviar el post por email String (URL) <data:posts.emailPostUrl/>
posts.editUrl URL para editar el post String (URL) <data:posts.editUrl/>
posts.feedLinks Lista de feeds específicos del post (p. ej. comentarios) Array [Object] Iterar con <b:loop values='data:posts.feedLinks' var='feed'>
posts.feedLinks.url URL del feed String (URL) <data:feed.url/>
posts.feedLinks.name Nombre del feed (Posts, Comments) String <data:feed.name/>
posts.feedLinks.feedType Tipo de feed (Atom, RSS) String <data:feed.feedType/>
posts.feedLinks.mimeType Mime type del feed String <data:feed.mimeType/>
posts.comments Lista de comentarios del post (solo en páginas de item) Array [Object] Iterar con <b:loop values='data:posts.comments' var='comment'>
posts.comments.id ID numérico del comentario Integer <data:comment.id/>
posts.comments.body Contenido del comentario String/HTML <data:comment.body/>
posts.comments.timestamp Fecha y hora del comentario String <data:comment.timestamp/>
posts.comments.author Nombre del autor del comentario o 'Anonymous' String <data:comment.author/>
posts.comments.authorUrl URL del perfil del autor (si no es anónimo) String (URL) <data:comment.authorUrl/>
posts.comments.deleteUrl URL para eliminar el comentario String (URL) <data:comment.deleteUrl/>
posts.comments.isDeleted Indica si el comentario fue borrado (muestra texto placeholder) Boolean <b:if cond='data:comment.isDeleted'>...</b:if>

Uso práctico de Widgets

Teniendo en cuenta los conceptos que hemos compartido, podemos crear cualquier Widget en Blogger. A continuacion mostrare los Codigos necesarios de los Widgets existentes y dejare un ejemplo de uso.


Variable / Configuración Descripción Tipo Ejemplo de Uso
Blog Widget Contenedor general para widgets dentro del blog Objeto <b:widget id='Widget1'>...</b:widget>
Settings Configuraciones generales para widgets y temas Objeto <data:settings/>
showDateHeader Muestra el encabezado de fecha en posts Boolean <b:if cond='data:showDateHeader'>...</b:if>
style.textcolor Color del texto principal en la plantilla String (color) <data:style.textcolor/>
showShareButtons Habilita botones para compartir posts en redes sociales Boolean <b:if cond='data:showShareButtons'>...</b:if>
showCommentLink Muestra el enlace para agregar comentarios Boolean <b:if cond='data:showCommentLink'>...</b:if>
style.urlcolor Color para los enlaces URL String (color) <data:style.urlcolor/>
showAuthor Controla la visibilidad del autor del post Boolean <b:if cond='data:showAuthor'>...</b:if>
style.linkcolor Color para los links dentro del texto String (color) <data:style.linkcolor/>
style.unittype Unidad de medida usada en estilos (px, em, %) String <data:style.unittype/>
style.bgcolor Color de fondo de la plantilla o sección String (color) <data:style.bgcolor/>
timestampLabel Etiqueta o texto para mostrar la fecha/hora String <data:timestampLabel/>
showAuthorProfile Indica si se muestra el perfil del autor Boolean <b:if cond='data:showAuthorProfile'>...</b:if>
style.layout Tipo o nombre del layout usado en la plantilla String <data:style.layout/>
showLabels Muestra etiquetas o categorías en posts Boolean <b:if cond='data:showLabels'>...</b:if>
showLocation Muestra ubicación geográfica del autor o post Boolean <b:if cond='data:showLocation'>...</b:if>
postLabelsLabel Etiqueta que precede a la lista de etiquetas del post String <data:postLabelsLabel/>
showTimestamp Controla la visualización de la fecha/hora en posts Boolean <b:if cond='data:showTimestamp'>...</b:if>
postsPerAd Cantidad de posts entre cada anuncio o bloque de publicidad Integer <data:postsPerAd/>
showBacklinks Muestra enlaces de backlinks en posts Boolean <b:if cond='data:showBacklinks'>...</b:if>
style.bordercolor Color del borde de secciones o elementos String (color) <data:style.bordercolor/>
showInlineAds Muestra anuncios insertados dentro del contenido Boolean <b:if cond='data:showInlineAds'>...</b:if>
showReactions Habilita reacciones o interacciones tipo “me gusta” Boolean <b:if cond='data:showReactions'>...</b:if>

Ejemplo de un Widget de Pagina:

<b:widget id='PageList1' locked='false' title='Páginas' type='PageList' version='2' visible='true'>
  <b:widget-settings>
    <b:widget-setting name='pageListJson'><![CDATA[{"link0":{"href":"/","position":0,"title":"Inicio"}}]]></b:widget-setting>
    <b:widget-setting name='homeTitle'>Inicio</b:widget-setting>
  </b:widget-settings>
  <b:includable id='main'>
    <div class='float-menu'>
      <nav>
        <ul>
          <b:loop values='data:links' var='link'>
            <li><a expr:href='data:link.href'>
              <b:class cond='data:link.isCurrentPage' name='is-active-page'/>
              <data:link.title/></a></li>
          </b:loop>
        </ul>
      </nav>
      <button class='float-menu-trigger'>
        <svg viewBox='0 0 24 24'><path d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z'/></svg>
      </button>
    </div>
  </b:includable>
  <b:includable id='content'>
    <div class='widget-content'>
      <b:include name='pageList'/>
    </div>
  </b:includable>
  <b:includable id='overflowButton'>
    <b:include name='verticalMoreIcon'/>
  </b:includable>
  <b:includable id='overflowablePageList'>
    <div class='overflowable-container'>
      <div class='overflowable-contents'>
        <div class='container'>
          <b:with value='true' var='overflow'>
            <b:with value='&quot;tabs&quot;' var='pageListClass'>
              <b:include name='pageList'/>
            </b:with>
          </b:with>
        </div>
      </div>
      <div class='overflow-button hidden'>
        <b:include name='overflowButton'/>
      </div>
    </div>
  </b:includable>
  <b:includable id='pageLink'>
    <li>
      <b:class cond='data:overflow' name='overflowable-item'/>
      <b:class cond='data:link.isCurrentPage' name='selected'/>
      <a expr:href='data:link.href'><data:link.title/></a>
    </li>
  </b:includable>
  <b:includable id='pageList'>
    <ul>
      <b:class cond='data:pageListClass' expr:name='data:pageListClass'/>
      <b:loop values='data:links' var='link'>
        <b:include name='pageLink'/>
      </b:loop>
    </ul>
  </b:includable>
</b:widget>

Cabe destacar que las expresiones, las cuales son utilizadas para poder obtener ciertas informaciones como imagenes, post url, entre otras deben de utilizarse de la siguiente manera. Debes de colocar expr: delante de lo que quieres conseguir. Ejemplo:

<a expr:href='data:post.url'>