Card de Entradas en Blogger

Card de Entradas en la plantilla NichoClean v2.0

La plantilla NichoClean v2.0 incorpora un sistema dinámico de bloques visuales llamado galería de entradas, el cual permite mostrar artículos del blog en diferentes formatos como cluster, carrusel, tarjetas (card), lista, masonry, lightbox, horizontal o incluso con tooltip. En este artículo vamos a centrarnos en la variante Card de Entradas, uno de los bloques más usados por su diseño limpio, minimalista y altamente optimizado para SEO.

¿Qué es un Card de Entradas?

Un Card de Entradas es un bloque visual que muestra:

  • Imagen destacada en tamaño grande (extraída automáticamente del feed).
  • Título del post con enlace directo.
  • Descripción o resumen corto de aproximadamente 100 caracteres.
  • Un botón de Leer más para mejorar la interacción.

Este diseño resulta ideal para páginas de inicio, secciones destacadas o páginas estáticas en las que se quiera resaltar un conjunto específico de entradas.

Cómo funciona en NichoClean v2.0

El motor de la plantilla está basado en un script central que carga dinámicamente las entradas desde el feed de Blogger. Dependiendo de la clase añadida (card, slider, lista, etc.), el sistema genera el HTML correspondiente. Para el caso de los Card de Entradas, la salida tendrá la siguiente estructura:

<article class='item-card' itemscope itemtype='https://schema.org/Article'>
  <a href='URL del post' itemprop='url'>
    <img src='Imagen destacada' alt='Imagen del artículo' itemprop='image'/>
  </a>
  <div class="item-card-content">
    <h3 itemprop='headline'>Título del post</h3>
    <p itemprop="description">Resumen de 100 caracteres...</p>
    <a href='URL del post' class='button'>Leer más</a>
  </div>
</article>

Este HTML ya está optimizado con microdatos schema.org, lo que mejora la indexación en buscadores.

Llamada con Shortcode HTML

Para insertar un bloque de tipo Card en cualquier parte del blog (inicio, entradas o páginas estáticas), basta con usar el siguiente div:

<div class="galeria-feed card" data-etiqueta="demo" data-cantidad="3"></div>

Este código es un shortcode HTML que se reemplaza dinámicamente gracias al script de la plantilla. Sus atributos son los que definen qué entradas mostrar y cuántas:

  • data-etiqueta="demo": aquí debes cambiar demo por la etiqueta (label) de las entradas que quieras mostrar. Ejemplo: data-etiqueta="recetas" o data-etiqueta="tutoriales".
  • data-cantidad="3": indica el número de entradas que quieres cargar. Puedes poner 3, 6, 9, etc., dependiendo de tu diseño.

Ejemplo práctico

Si quieres mostrar 3 entradas con la etiqueta blogger, el código sería:

<div class="galeria-feed card" data-etiqueta="blogger" data-cantidad="3"></div>

Resultado galeria-feed card

Ventajas del Card de Entradas en NichoClean v2.0

  • Diseño limpio y minimalista, integrado con el estilo de la plantilla.
  • Responsive: se adapta automáticamente a móviles, tablets y PC.
  • SEO friendly: incluye microdatos para mejorar la visibilidad en Google.
  • Fácil de usar: se inserta con un simple div sin necesidad de conocimientos avanzados.
  • Reutilizable: puedes añadir tantos bloques como quieras en cualquier parte del blog.

El sistema de Card de Entradas en NichoClean v2.0 convierte el feed de Blogger en un módulo visual moderno, flexible y optimizado para SEO. Solo necesitas cambiar la data-etiqueta y la data-cantidad para personalizar el bloque y mostrar exactamente lo que necesitas. Esto lo hace perfecto para destacar artículos clave, crear secciones dinámicas en la portada o enriquecer páginas estáticas con contenido fresco.