Plantilla Blogger: LMS Education Tlalli

LMS Education Tlalli es la nueva generación de nuestra plantilla para Blogger enfocada en educación. Construida sobre Bootstrap 5.3 con una paleta mediterránea, ofrece un hero animado a pantalla completa, tarjetas interactivas y un potente sistema de shortcodes para publicar cursos, lecciones y recursos sin esfuerzo. Tlalli tiene dos versiones: la versión Pro agrega modo oscuro, galería de etiquetas autogenerada, shortcode de etiqueta aleatoria y eliminación de créditos, mientras que la versión gratuita es totalmente funcional con todas las características principales.

Widget de Opciones de Plantilla

El gadget de Opciones de Plantilla (LinkList46) se encuentra en la sección settings de tu Diseño. Te permite controlar el diseño y estilo sin tocar código.

Barra de Navegación y Menú

Menú Principal

El menú de navegación principal está basado en un gadget de Lista de Links (ubicado en la sección MainMenu, bloqueado). La forma en que nombras cada enlace determina cómo se comporta. A continuación, todos los patrones compatibles con instrucciones paso a paso.

Elemento de menú regular

Para agregar un enlace simple sin submenú, solo completa los campos Nombre del sitio y URL del sitio de manera normal.

Ejemplo: configura Nombre del sitio como Inicio y URL del sitio como la URL de la página principal de tu blog. El resultado es un elemento cliqueable en la barra de navegación.

Elemento de menú con submenú (un nivel de sub-elementos)

Necesitas dos o más entradas en la Lista de Links para crear un grupo desplegable:

Paso 1: Crea un enlace regular que servirá como padre del submenú. La URL no es relevante — no será cliqueable.

Paso 2: Crea un segundo enlace para el primer elemento hijo. Esta vez, agrega un guión (-) al principio del campo Nombre del sitio y la URL real:

Paso 3: Agrega tantos elementos hijos como necesites. Cada hijo debe comenzar con un guión en el campo Nombre del sitio.

Ejemplo completo del gadget — esta configuración produce un “Menú desplegable” padre con tres hijos:

Submenú de dos niveles (submenú dentro de un submenú)

Para crear un segundo nivel anidado, usa un doble guión (--) al principio del Nombre del sitio. Solo los elementos directamente después de un hijo con un guión se convierten en parte de su submenú.

Ejemplo de configuración del gadget:

• Menú desplegable (sin guión — padre, no cliqueable)
• -Elemento del menú (un guión — primer hijo del submenú)
• --Submenú elemento (dos guiones — anidado bajo “Elemento del menú”)
• -Otro elemento (un guión — segundo hijo del submenú, a nivel raíz)

Elemento de menú con lista de posts vía AJAX

Para mostrar una lista en vivo de posts de una etiqueta específica dentro de un submenú, agrega un nuevo enlace siguiendo este formato:

tag:NombreEtiqueta-NumeroDePosts-MostrarMiniatura

Donde:

• NombreEtiqueta — la etiqueta de Blogger (no distingue mayúsculas/minúsculas)
• NumeroDePosts — cuántos posts obtener y mostrar
• MostrarMiniatura — true o false (mostrar imágenes en miniatura o solo texto)

Ejemplo: para mostrar 5 posts de la etiqueta “Cursos” con miniaturas, crea un enlace con:

• Nombre del sitio: tag:Cursos-5-true
• URL del sitio: cualquier valor (no se usará)

El resultado es un submenú que obtiene títulos de posts y miniaturas vía AJAX:

Agregar un formulario de búsqueda a la barra de navegación

Crea un enlace con Nombre del sitio configurado como search y cualquier URL. La plantilla lo reemplaza automáticamente con un botón de búsqueda. En escritorio aparece un formulario desplegable al hacer clic; en móvil se muestra un formulario en línea directamente. Ambos hacen foco automático y evitan envíos vacíos.

Agregar el selector de modo oscuro Solo Pro

Crea un enlace con Nombre del sitio configurado como theme y cualquier URL. La plantilla lo reemplaza con un selector de tema que ofrece Claro (ícono de sol), Oscuro (ícono de luna con estrellas) y Auto (ícono de círculo medio, sigue la preferencia del sistema).

Ejemplo completo — una configuración típica de Lista de Links para el menú principal

El gadget mostrado arriba produce una barra de navegación con: Inicio (regular), Menú desplegable (padre con hijos), Cursos (menú AJAX con lista de posts), un formulario de búsqueda y el selector de modo oscuro.

Íconos Sociales en la Barra de Navegación

La sección navSocial usa un gadget de Lista de Links (LinkList68). Agrega las URLs de tus redes sociales y la plantilla detecta automáticamente cada red, mostrando el ícono de Bootstrap correspondiente. Más de 40 redes son compatibles, incluyendo Facebook, Instagram, X, YouTube, TikTok, Mastodon y más.

Ejemplo completo del gadget:

Sección Hero

El hero a pantalla completa funciona con cuatro gadgets en tu Diseño:

Para editar el fondo del hero:

1. Ve a Diseño → busca la sección Hero Background
2. Haz clic en Editar en el gadget de Imagen
3. Sube una nueva imagen (al menos 1600px de ancho para mejores resultados)
4. Guarda el gadget

Para editar el título y subtítulo del hero:

1. Ve a Diseño → sección Hero Content
2. Haz clic en Editar en el gadget de Cabecera
3. Cambia los campos de título y descripción
4. Guarda

Para editar el botón CTA del hero:

1. Ve a Diseño → sección Hero CTA
2. Haz clic en Editar en el gadget HTML
3. Ingresa un shortcode cta: (ver Referencia de Shortcodes más abajo)
4. Guarda

Para editar la fila de características del hero:

1. Ve a Diseño → sección Hero Features
2. Haz clic en Editar en el gadget HTML
3. Ingresa un shortcode feat: (ver Referencia de Shortcodes más abajo)
4. Guarda

El hero incluye una capa oscura homogénea, formas geométricas animadas (círculos y puntos), animaciones de entrada en todos los elementos y un indicador de desplazamiento que enlaza a la sección de Cursos Destacados. La altura del encabezado es configurable desde las Opciones de Plantilla.

Secciones de la Página Principal

Todas las secciones de la página principal aparecen solo en la página de inicio. Cada una funciona con un gadget HTML que contiene una sola línea de shortcode.

Para editar qué posts aparecen en una sección:

1. Ve a Diseño y encuentra la sección en la página principal
2. Haz clic en el ícono de Editar
3. Cambia el shortcode para apuntar a tu etiqueta. Por ejemplo, para mostrar 6 posts de una etiqueta llamada “Cursos” en estilo tarjeta de curso: 6-tag:Cursos-600px-course
4. Para mostrar los últimos posts sin importar la etiqueta, usa latest: 6-latest-600px-course
5. Guarda el gadget

Galería de Etiquetas

Versión Pro

La versión Pro autogenera una galería visual de etiquetas directamente desde tus etiquetas de Blogger. Para configurarla:

1. Ve a Diseño → sección Galería de Etiquetas
2. Haz clic en Editar en el widget de Etiquetas
3. Configura el título como Explore Topics-BTLabels
4. Haz clic en Etiquetas seleccionadas, elige las etiquetas que deseas mostrar y haz clic en Listo
5. Guarda el gadget

Un widget de imagen de fondo (Image91) agrega el fondo de la sección — sube una imagen de al menos 1600px de ancho.

Versión Gratuita

La versión gratuita usa un gadget HTML estático con 4 tarjetas de categoría prediseñadas (Blog, Campus, Cursos, Videos). Para personalizar:

1. Ve a Diseño → sección Galería de Etiquetas
2. Haz clic en Editar en el widget HTML
3. Actualiza los atributos href de los enlaces y las URLs src de las miniaturas para cada tarjeta
4. Guarda el gadget

Referencia de Shortcodes

Los shortcodes son líneas de texto que colocas dentro de gadgets HTML o entradas del blog. La plantilla los lee y los reemplaza con contenido dinámico.

Shortcode de Lista de Posts (en widgets HTML)

{N}-{tipoPosts}-{tamaño}px-{estilo}

Parámetros:

• N — número de posts a mostrar
• tipoPosts — latest (más recientes), tag:NombreEtiqueta (posts bajo una etiqueta específica), o randomtag (etiqueta aleatoria)
• tamaño — ancho de la miniatura en píxeles
• estilo — estilo de visualización (ver tabla abajo)

Estilos disponibles:

Ejemplos prácticos:

6-latest-600px-course             Últimos 6 posts como tarjetas de curso
3-tag:Testimoniales-400px-testimonial-grid  3 testimoniales en cuadrícula
1-tag:Videos-800px-video          Último video de la etiqueta "Videos"
4-tag:Campus-600px-mosaic         Galería campus en mosaico de 4 columnas
3-latest-65px                     Últimos 3 posts, lista del sidebar
3-tag:Cursos-65px                 Últimos 3 cursos, lista del footer
6-tag:Blog-350px-bloglist         Últimos 6 posts del blog como tarjetas

Shortcodes Dentro de Posts

Coloca esto en cualquier parte del contenido de tu entrada para incrustar una lista dinámica de posts:

[posts--tag:NombreEtiqueta--N--estilo]

El parámetro estilo es opcional y predetermina simplelist. Estilos disponibles: list, simplelist, course, bloglist, testimonial-grid.

Ejemplos:

[posts--tag:JavaScript--5]              5 posts, lista simple (predeterminado)
[posts--tag:Cursos--3--course]         3 posts como tarjetas de curso
[posts--tag:Noticias--6--bloglist]          6 posts como tarjetas de blog
[posts--tag:Testimoniales--3--testimonial-grid]  3 testimoniales en cuadrícula

Esto es útil para crear páginas de contenido de cursos, directorios de recursos o listas de lecciones dentro de cualquier post.

Etiqueta Aleatoria

Usa randomtag como tipoPosts para obtener posts de una etiqueta aleatoria. La plantilla primero obtiene todas las etiquetas de tu blog, elige una al azar y luego obtiene los posts de esa etiqueta. Ideal para secciones de descubrimiento o funciones de “sorpresa”:

6-randomtag-600px-course

Shortcode de Comentarios

N-comments

Ejemplo: 3-comments — muestra 3 comentarios recientes con avatares y fragmentos. Mejor usado en sidebars o columnas del footer.

Shortcode CTA

cta:url|texto|clase-icono

Ejemplo: cta:#bt-courses|Ver Cursos|bi-arrow-right — muestra un botón que enlaza a la sección de Cursos. La clase del ícono puede ser cualquier Bootstrap Icon de la referencia completa de íconos (ej., bi-arrow-right, bi-play-circle, bi-book).

Para enlazar a una página externa: cta:https://ejemplo.com|Visitar Sitio|bi-box-arrow-up-right

Shortcode de Características

feat:texto,icono|texto,icono|...

Cada par texto,icono es un elemento de característica. La barra vertical (|) separa los elementos. Los nombres de íconos siguen el prefijo bi- de la librería de Bootstrap Icons.

Ejemplo: feat:Profesores Expertos,bi-mortarboard-fill|Cursos Online,bi-laptop|Certificados,bi-patch-check-fill

Shortcode de Estadísticas

stat:cantidad,icono,etiqueta|cantidad,icono,etiqueta|...

Cada grupo cantidad,icono,etiqueta es un elemento de estadística. La barra vertical separa elementos. Los nombres de íconos siguen el prefijo bi- de la librería de Bootstrap Icons.

Ejemplo: stat:1500,bi-people-fill,Estudiantes Activos|45,bi-journal-bookmark-fill,Cursos Disponibles|12,bi-award-fill,Profesores Expertos|98,bi-globe-americas,% Satisfacción

Los números se animan contando desde 0 hasta el valor objetivo automáticamente cuando la sección aparece en pantalla. La animación se ejecuta en 50 pasos a intervalos de 30ms para un efecto suave.

Marcadores de Título de Widget

Puedes modificar cómo se comportan los títulos de los widgets agregando marcadores especiales al campo de título en cualquier gadget.

Agregar una descripción (-desc:)

Los gadgets de Blogger no soportan descripciones de forma nativa. Para agregar una, añade -desc: seguido del texto de tu descripción al título:

Titulo-desc:Texto de la descripción

Ejemplo: un widget de Etiquetas titulado Temas-desc:Explora nuestras categorías de cursos muestra:

• Título: Temas
• Descripción: Explora nuestras categorías de cursos (en una fuente más clara y pequeña debajo del título)

Esto funciona en cualquier tipo de gadget — Etiquetas, PopularPosts, HTML, Lista de Links, etc.

Activar la galería de etiquetas (-BTLabels)

Añade -BTLabels al título de un widget de Etiquetas para transformarlo en una galería visual de etiquetas estilo tarjeta:

Explorar Temas-BTLabels

En la versión Pro, esto autogenera tarjetas con imágenes de tus etiquetas. En la versión gratuita, la lista de etiquetas requiere HTML estático. El sufijo -BTLabels se elimina automáticamente del título mostrado.

Modo Oscuro Solo Pro

La versión Pro incluye una implementación completa de modo oscuro usando el atributo data-bs-theme de Bootstrap 5.3. Todos los colores, sombras y superficies se adaptan automáticamente.

Cómo activarlo

1. Ve a Diseño → sección Menú Principal
2. Haz clic en Editar en el gadget de Lista de Links
3. Agrega un nuevo enlace con Nombre del sitio configurado como theme y cualquier URL
4. Guarda el gadget

La plantilla reemplaza el elemento con un selector de tema que ofrece tres opciones:

• Claro — ícono bi-sun-fill
• Oscuro — ícono bi-moon-stars-fill
• Auto — ícono bi-circle-half (sigue la preferencia del sistema y se actualiza en tiempo real)

Logo para Modo Oscuro

Para usar un logo diferente en modo oscuro:

1. Ve a Diseño → sección settings
2. Agrega un gadget de Imagen titulado Dark Mode Logo (Optional)
3. Sube un logo alternativo diseñado para fondos oscuros (colores claros, sin elementos oscuros)
4. Guarda

La plantilla intercambia los logos automáticamente cuando el modo oscuro está activo y revierte al cambiar de vuelta al modo claro.

Persistencia

La preferencia de tema se almacena en localStorage y persiste entre sesiones. El modo Auto escucha los cambios de prefers-color-scheme del sistema vía matchMedia y actualiza la página en tiempo real sin necesidad de recargar.

Widgets del Sidebar

Widgets del Footer

El footer tiene un diseño de 3 columnas (col-md-6 col-lg-4):

La barra inferior del footer incluye un año de copyright que se actualiza automáticamente y un menú para enlaces adicionales.

Características de los Posts

Migas de Pan

En las páginas de post individual, las migas de pan muestran Inicio · Etiqueta · Título del Post con un diseño transparente limpio y efecto de subrayado al pasar el cursor.

Tarjeta de Cabecera del Post

Cada post muestra una tarjeta de cabecera con:

• Título del post (con color de acento opcional en la primera palabra cuando está habilitado en Opciones de Plantilla)
• Nombre del autor con ícono de acento
• Fecha de publicación (configurable vía showTimestamp de Blogger)
• Tiempo estimado de lectura (calculado automáticamente a 200 palabras por minuto)
• Conteo de comentarios
• Píldoras de etiquetas (fondo terracota con hover dorado)

Navegación entre Posts

La navegación de post anterior y siguiente con miniaturas estilo tarjeta aparece al final de cada post.

Esqueletos de Carga

Se muestran marcadores de posición con efecto shimmer hechos solo con CSS mientras las listas de posts AJAX se cargan, manteniendo la experiencia fluida en conexiones lentas. Estas tarjetas esqueleto coinciden con la forma del contenido real que se está cargando.

Personalización

Propiedades CSS Personalizadas

La plantilla usa propiedades CSS personalizadas para modificaciones fáciles del tema. Variables clave:

--color-primary: #C65D3E;
--color-secondary: #1A4A5A;
--color-accent: #D4A434;
--color-dark: #3C3028;
--color-light: #F9F3EA;
--font-display: 'DM Serif Display', Georgia, serif;
--font-body: 'Inter', system-ui, -apple-system, sans-serif;
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;

Diseñador de Plantillas de Blogger

Variables personalizables clave vía Diseño → Diseñador de plantillas:

• Color principal (marca primaria, predeterminado #C65D3E)
• Fuente y color del texto del cuerpo
• Colores de enlaces (predeterminado, visitado, hover)
• Fuente y color del título del blog
• Fuente y color del título de los posts
• Fuente y color del texto de los posts
• Color de fondo del footer
• Color del subtítulo del hero

Colores del Modo Oscuro Solo Pro

Cuando [data-bs-theme="dark"] está activo, estas variables se invierten automáticamente para una experiencia de lectura oscura confortable:

--color-primary: #D07050;
--color-secondary: #3A8A9A;
--color-accent: #E6BE5A;
--color-dark: #E8E0D5;
--color-light: #1E1A17;
--color-surface: #2A2522;

Preguntas Frecuentes

¿Cómo cambio el fondo del hero?

Ve a Diseño → sección Hero Background → haz clic en Editar en el gadget de Imagen y sube una nueva imagen (recomendado 1600px de ancho).

¿Cómo edito el título del hero?

Ve a Diseño → sección Hero Content → edita el gadget de Cabecera. Los campos de título y descripción controlan lo que se muestra en el hero.

¿Cómo cambio qué posts aparecen en Cursos Destacados?

Edita el gadget HTML en la sección Cursos Destacados y cambia la etiqueta en el shortcode. Ejemplo: 6-tag:MiEtiqueta-600px-course.

¿Cómo activo el modo oscuro?

Solo Pro Agrega un elemento en la Lista de Links con el texto theme al menú principal. La plantilla lo reemplaza automáticamente con el selector de modo oscuro.

¿Cómo agrego un logo para modo oscuro?

Solo Pro Agrega un gadget de Imagen en la sección settings titulado Dark Mode Logo (Optional) y sube tu logo alternativo.

¿Cómo elimino la barra lateral?

En el gadget de Opciones de Plantilla, configura Sidebar Location como none.

¿Cómo agrego una lista de posts dentro de un post?

Usa el shortcode dentro del post: [posts--tag:NombreEtiqueta--5] en cualquier parte del contenido de tu entrada. Funciona para módulos de curso, directorios de lecciones, listas de recursos, etc.

¿Cómo cambio los íconos de redes sociales?

Edita el gadget de Lista de Links en la sección navSocial. Agrega las URLs de tus perfiles como enlaces — la plantilla detecta cada red automáticamente.

¿Cómo actualizo el logo?

Ve a Diseño → sección Cabecera de la página → haz clic en Editar y sube la imagen de tu logo.

¿Cómo personalizo la galería de etiquetas en la versión gratuita?

Edita el widget HTML en la sección Galería de Etiquetas para actualizar los enlaces e imágenes de las tarjetas. Para generación automática, actualiza a la versión Pro.

Changelog

• 17-05-2026 — Lanzamiento inicial de LMS Education Tlalli. Bootstrap 5.3, hero animado a pantalla completa, 9 secciones de página principal, sistema de shortcodes (8 estilos de visualización), widget de Opciones de Plantilla (6 configuraciones), marcadores de título de widget, soporte RTL. Pro: modo oscuro con intercambio de logo, galería de etiquetas autogenerada, shortcode de etiqueta aleatoria, eliminación de créditos.