Plantilla Blogger: LMS Education

LMS Education es nuestra plantilla original para Blogger enfocada en educación. Con un potente sistema de shortcodes, permite publicar cursos, lecciones y tutoriales de forma sencilla con listas de posts automáticas, un slider de testimonios, galería de etiquetas y formulario de contacto integrado. Tiene dos versiones: la versión Pro añade modo oscuro, una sección de blog, detección automática de íconos sociales en sidebar y footer, una galería de etiquetas mejorada, galería campus en mosaico y remoción de créditos; mientras que la versión gratuita es totalmente funcional con todas las características principales.

Habilitar versión móvil

Para aprovechar al máximo que esta plantilla es totalmente responsive es necesario deshabilitar la versión móvil por defecto de Blogger. Para hacerlo, dirígete a Tema, busca Celulares (Latinoamérica) o Versión móvil (España) y da click en el ícono de configuración: . Y escoge: «No, mostrar el tema para escritorio en los dispositivos móviles.»

Gadget 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 la estructura y el estilo sin tocar código.

Barra de Navegación y Menú

Menú superior

El menú superior está basado en un gadget de Lista de Links. En este menú se agregan automáticamente íconos para teléfono, email y localización.

El menú identificará direcciones de email y teléfonos y agregará el ícono correspondiente automáticamente. Para el ícono de localización solo debes asegurarte que el enlace incluye la palabra «map» (map, maps, mapas, etc). Si no la incluye, puedes agregar #map al final de tu enlace. Ejemplo:

https://miblog.blogspot.com/p/about/#map

Ejemplo completo del gadget:

Menú social superior

El menú social superior también está basado en un gadget de Lista de Links. Tus enlaces serán transformados automáticamente en los respectivos íconos sociales.

Ejemplo completo:

Menú principal desplegable

El menú principal soporta elementos desplegables y está basado en un gadget de Lista de Links. Cómo nombras cada enlace determina su comportamiento.

Enlace de menú regular

Para agregar un enlace simple sin sub-menú, solo especifica el Nombre del sitio y la URL del sitio de forma normal.

Menú con sub-menú de UN nivel

Paso 1: Crea un enlace regular que servirá como el elemento padre del sub-menú. La URL no es relevante — no será cliqueable.

Paso 2: Crea un segundo enlace, pero esta vez agrega un guión (-) al principio del campo Nombre del sitio y la URL real:

Paso 3: Agrega tantos elementos como necesites, recordando agregar un guión al principio de cada nombre.

Ejemplo completo del gadget:

Resultado:

Sub-menú de DOS niveles

Para crear un segundo nivel anidado, usa dos guiones (--) al principio del Nombre del sitio. Solo los elementos que aparecen inmediatamente después de un hijo con un guión se convierten en parte de ese sub-menú.

Ejemplo del gadget:

La configuración mostrada produce:

• Drop down menu (sin guión — padre, no cliqueable)
• -Menu item (un guión — primer hijo del sub-menú)
• --Submenu item (dos guiones — anidado bajo “Menu item”)
• -Another item (un guión — segundo hijo, al mismo nivel)

Resultado:

Lista de posts vía AJAX en el menú

Para mostrar una lista de posts de una etiqueta específica dentro del menú desplegable, agrega un nuevo enlace siguiendo este formato:

tag:NombreEtiqueta-NumeroDePosts-MostrarMiniatura

Donde:

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

Ejemplo: para mostrar 5 posts de la etiqueta “Photos” con miniaturas, crea un enlace con Nombre del sitio: tag:Photos-5-true.

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

Selector de modo oscuro Solo Pro

Para agregar el selector de modo oscuro a tu barra de navegación, crea un enlace con Site Name theme y cualquier URL. La plantilla lo reemplaza con un menú desplegable que ofrece Light (ícono de sol), Dark (ícono de luna y estrellas) y Auto (ícono de medio círculo, sigue la preferencia del sistema).

Cabecera

Fondo del encabezado

Para cambiar la imagen de fondo del encabezado, en tu panel de Blogger, en la sección Diseño busca el gadget Header Background y da click en editar.

Para mejores resultados, usa imágenes con un ancho mayor a 1600px.

Título del blog y logo

Para modificar el título o agregar un logo puedes ir al panel de Blogger, después Diseño y buscar Page Header Gadget.

Menú de bloques

Mostrado únicamente en la página de inicio, el menú de bloques usa un gadget de Lista de Links. Dado que este menú no soporta elementos desplegables, puedes agregar, editar o eliminar elementos como en cualquier otra lista de enlaces y estos serán transformados en bloques.

Secciones de la Página de Inicio

Todas las secciones de la página de inicio aparecen únicamente en la página principal. Cada una funciona mediante 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 busca la sección en la página de inicio
2. Click en el ícono de Editar
3. Cambia el shortcode para apuntar a tu etiqueta. Ejemplo: 6-tag:Cursos-350px-course
4. Para mostrar los últimos posts sin importar etiqueta, usa latest: 6-latest-350px-course
5. Guarda el gadget

Lista de posts 1: Cursos

Tanto la versión gratuita como la Pro ofrecen el primer bloque de lista de posts. Puedes editar esta área para mostrar los últimos posts de tu blog o los últimos posts dentro de una etiqueta determinada.

Para editar esta área, da click en el icono de edición . Para mostrar los últimos 6 posts usa esta línea:

6-latest-350px-course

Para mostrar los últimos 6 posts dentro de la etiqueta “Cursos”, por ejemplo:

6-tag:Cursos-350px-course

Galería de etiquetas Pro

En la versión Pro es posible mostrar una galería de etiquetas de manera fácil y rápida, pudiendo escoger cuáles mostrar. En la versión gratuita también es posible crearla, pero para ello hay que editar el código HTML, el enlace y la imagen miniatura para cada etiqueta.

Para escoger las etiquetas a mostrar, solo debes dar click en el icono de edición de este gadget . Click en Etiquetas seleccionadas, después editar, escoger las etiquetas una a una y guardar los cambios.

Slider de testimoniales

Esta sección es perfecta para mostrar testimoniales de clientes acerca de tus productos o servicios, pero dado que es una lista de posts basados en una etiqueta, puedes agregar cualquier tipo de contenido aquí. Solo necesitas especificar la etiqueta que deseas usar.

Por ejemplo, para mostrar los últimos 3 posts dentro de la etiqueta “Testimoniales”, da click en el icono de edición y usa esta línea:

3-tag:Testimoniales-250px-testimonial

Marcadores de Título en Widgets

Puedes modificar cómo se comportan los títulos de los gadgets agregando marcadores especiales al campo de título.

Agregar una descripción (-desc:)

La mayoría de los gadgets en Blogger no tienen un campo para agregar una descripción. Para agregar una, añade -desc: seguido de tu texto al título del gadget:

Titulo-desc:Texto de descripción

Ejemplo: el gadget de búsqueda (Search Box) no tiene campo para descripción. Para agregar una, escribe en el título:

SEARCH-desc:Encuentra cursos, lecciones y tutoriales.

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

Referencia de Shortcodes

Shortcode de Lista de Posts (en gadgets HTML)

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

Parámetros:

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

Estilos disponibles:

Ejemplos prácticos:

6-latest-350px-course             Últimos 6 posts como tarjetas de curso
3-tag:Testimoniales-250px-testimonial 3 testimonios en slider
1-tag:Videos-800px-video          Último video de la etiqueta "Videos"
4-tag:Campus-500px-mosaic         Galería campus en mosaico de 4 columnas
3-latest-65px                     Últimos 3 posts, lista de sidebar
6-tag:Blog-350px-bloglist         Últimos 6 posts de blog como tarjetas

Shortcode de Comentarios

N-comments

Ejemplo: 3-comments — muestra los 3 comentarios más recientes con avatares. Ideal para sidebars o columnas del footer.

Shortcodes dentro de Posts

Coloca esto en cualquier lugar del contenido de un post para insertar una lista dinámica de posts:

[posts--tag:NombreEtiqueta--N]

Ejemplos:

[posts--tag:JavaScript--5]              5 posts, lista simple
[posts--tag:Cursos--3]                  3 posts del curso
[posts--tag:Open Source--50]            50 posts de código abierto

Lista de posts 2: Blog Solo Pro

Esta sección solo está disponible en la versión Pro. Aquí puedes mostrar los últimos posts del blog o los últimos posts dentro de una etiqueta específica.

Por ejemplo, para mostrar los últimos 6 posts dentro de la etiqueta “Blog” da click en el ícono de edición y usa esta línea:

6-tag:Blog-350px-bloglist

Sección de Video Destacado

En esta sección puedes mostrar el video del último post publicado bajo una etiqueta específica.

Por ejemplo, para mostrar el video del último post publicado bajo la etiqueta “Videos”, da click en el ícono de edición en esta área y usa esta línea:

1-tag:Videos-800px-video

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. En Opciones de Plantilla, cambia Dark Mode a true.
2. Agrega un elemento de LinkList con Site Name theme a tu gadget de Main Drop Down Menu (LinkList78).

La plantilla reemplaza el elemento theme con un menú desplegable que ofrece tres opciones:

• Light — ícono de sol (bi-sun-fill)
• Dark — ícono de luna y estrellas (bi-moon-stars-fill)
• Auto — ícono de medio círculo (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)

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 operativo mediante matchMedia y actualiza la página en tiempo real sin necesidad de recargar.

Widgets del Sidebar y Footer

Íconos sociales en sidebar y footer Solo Pro

En esta plantilla puedes agregar íconos a redes sociales en el sidebar o footer de manera muy sencilla, sobre todo en la versión Pro. Solo debes editar o crear un gadget de Lista de Links y agregar cada una de tus redes sociales con sus enlaces respectivos. Al guardar los cambios, estos serán transformados automáticamente en íconos. Más de 40 redes son soportadas incluyendo Facebook, Instagram, X, YouTube, TikTok, Mastodon y más.

Ejemplo:

Widgets del Sidebar

Widgets del Footer

El footer tiene un diseño de 3 columnas:

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

Widget de últimos comentarios

Para agregar un widget de últimos comentarios solo necesitas agregar un nuevo gadget HTML con el siguiente formato:

NumeroDeComentarios-comments

Donde NumeroDeComentarios es el número de comentarios que deseas mostrar.

Ejemplo, para agregar una lista con los últimos 3 comentarios:

3-comments

Características de los Posts

Cada post incluye:

• Migas de pan — Navegación Inicio · Etiqueta · Título del Post en páginas individuales
• Caja de Autor — Imagen de perfil, nombre y descripción debajo de cada post
• Posts Relacionados — Generados automáticamente basados en las etiquetas del post con vista previa en miniatura
• Navegación entre posts — Posts anterior y siguiente con miniaturas estilo tarjeta
• Botones de compartir — Email, Facebook, Twitter, Pinterest, y WhatsApp

Personalización

Fuente y colores principales

Para cambiar la fuente (tipo de letra) principal así como la paleta de colores, ve a la sección Plantilla y busca el enlace para el Diseñador de plantillas. Una vez ahí, ve a Ajustar ancho y ahí podrás hacer las modificaciones que necesites.

Avatar / Imagen de perfil

La plantilla usa el sistema integrado de perfil de Blogger. Para actualizar tu avatar que aparece en la plantilla, necesitas actualizar tu foto de perfil de Blogger. Una vez que la cambies, se actualizará automáticamente en toda la plantilla.

Pasos rápidos: Ve a blogger.com/edit-profile.g → desplázate hasta Foto de perfil → Eliminar imagen (si es necesario) → sube tu nuevo avatar → Guardar perfil.

Preguntas Frecuentes

¿Cómo cambio el fondo del encabezado?

Ve a Diseño → busca el gadget Header Background → click en Editar y sube una nueva imagen (mínimo 1600px de ancho).

¿Cómo edito el título o logo del blog?

Ve a Diseño → sección Page Header → click en Editar en el gadget Header. Puedes cambiar el título, descripción y subir un logo.

¿Cómo cambio qué posts aparecen en la sección de Cursos?

Edita el gadget HTML en la sección Courses List y cambia el shortcode. Ejemplo: 6-tag:MiEtiqueta-350px-course.

¿Cómo elimino el sidebar?

En el gadget de Opciones de Plantilla, cambia Sidebar Location a none.

¿Cómo hago que el menú sea fijo?

En el gadget de Opciones de Plantilla, cambia Top Menu Is Always Visible a true.

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

Usa el shortcode: [posts--tag:NombreEtiqueta--NumeroDePosts] en cualquier lugar del contenido. Ejemplo: [posts--tag:Curso 1--10].

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

Edita el gadget de Lista de Links en la sección Top Links Menu (para íconos del menú superior) o el gadget FOLLOW ME (para sidebar/footer). Agrega las URLs de tus perfiles — la plantilla detecta cada red automáticamente.

¿Cómo agrego una descripción a un widget?

Añade -desc:Tu descripción al campo de título del gadget. Ejemplo: Cursos-desc:Explora nuestros últimos cursos y tutoriales.

¿Cómo se actualiza el año de copyright?

La plantilla actualiza el año de copyright en el footer automáticamente — no necesitas hacer nada.

¿Cómo activo el modo oscuro? Solo Pro

Cambia Dark Mode a true en Opciones de Plantilla, luego agrega un elemento LinkList con el texto theme a tu menú principal (LinkList78).

¿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 activo la dirección RTL?

En el gadget de Opciones de Plantilla, cambia RTL Direction a true. La plantilla carga el CSS RTL de Bootstrap e invierte todo el diseño para idiomas de derecha a izquierda.

Changelog

• 23-05-2026 — Agregado selector de dirección RTL en Opciones de Plantilla. Se carga el CSS RTL de Bootstrap 5.3.3 cuando está activado. Funciona en todas las versiones (Free, Pro, Demo).
• 23-05-2026 — Agregado soporte de modo oscuro a las versiones Pro y Demo con persistencia en localStorage, escucha de prefers-color-scheme y cambio automático de logo. Actualización de Bootstrap 4.3.1 a 5.3.3.
• 22-05-2026 — Migración de librería de íconos de Font Awesome 4.7 a Bootstrap Icons 1.11.3. Agregado condicional data:view.isPreview para soporte de vista previa.
• Versión 1.0.7 – 19-02-2022 – Corrección de scripts por el cambio de formato en las URLs de imágenes
• Version 1.0.6 – 21-09-2021 – Gadget de suscripción por correo eliminado debido a la cuestionable decisión de Google de descontinuarlo.
• Version 1.0.5 – 16-03-2021 – Corregido un bug en el menú dropdown cuando se agregaban elementos de segundo nivel.
• Version 1.0.4 – 23-08-2020 – Agregado un widget de Template options / Opciones de plantilla. Corregido: Gadgets del sidebar ahora visibles desde la sección Diseño.
• Versión 1.0.3 – 17-07-2020 – Corregido previos de YouTube de baja calidad. Agregado tercer nivel en menú desplegable.
• Versión 1.0.2 – 28-06-2020 – Corregido: previos de los posts más compatibles con el nuevo Blogger.
• Versión 1.0.1 – 24-06-2020 – Corregido “leer más” en páginas de Blogger.
• Versión 1.0 – 08-06-2020 – Versión inicial.