Galería de imágenes Tooltip en Blogger

Miniaturas que muestran el título al pasar el ratón

La plantilla NichoClean v2.0 permite crear galerías dinámicas de imágenes usando un sistema de shortcodes y scripts. Entre las variantes de galería, encontramos la opción Tooltip, que muestra miniaturas de tus entradas y el título en un tooltip al pasar el cursor, manteniendo un diseño limpio, minimalista y SEO-friendly.

Esta funcionalidad es ideal para:

  • Resaltar imágenes de posts recientes o por etiqueta.
  • Mantener la interfaz simple y ordenada.
  • Mejorar la experiencia del usuario con interactividad al pasar el ratón.
  • Mantener los datos estructurados para SEO.

Cómo insertar una galería Tooltip

Usa el siguiente shortcode en cualquier página, post o index:

<div class="galeria-feed tooltip" data-etiqueta="demo" data-cantidad="6"></div>

Explicación de atributos:

  • class="galeria-feed tooltip" → activa la variante Tooltip.
  • data-etiqueta="demo" → cambia "demo" por la etiqueta de tus posts.
  • data-cantidad="6" → número de entradas que se mostrarán.

Ejemplo de HTML generado con Schema.org

Cuando el script se ejecuta, genera un HTML similar a este (simplificado para un ejemplo de una miniatura):

<article class="item-tooltip" itemscope itemtype="https://schema.org/Article" title="Título del artículo">
  <a href="https://tublog.com/post-ejemplo" itemprop="url" title="Título del artículo">
    <img src="https://placehold.co/400x250" alt="Imagen del artículo: Título del artículo" itemprop="image" />
  </a>
  <meta itemprop="headline" content="Título del artículo"/>
  <div itemprop="author" itemscope itemtype="https://schema.org/Person">
    <meta itemprop="name" content="Autor del post"/>
    <meta itemprop="url" content="https://tublog.com/autor"/>
  </div>
  <meta itemprop="datePublished" content="2025-09-01"/>
  <meta itemprop="dateModified" content="2025-09-01"/>
  <meta itemprop="mainEntityOfPage" content="https://tublog.com/post-ejemplo"/>
</article>

✅ Este HTML cumple con Schema.org, mostrando:

  • Título del post.
  • Imagen destacada.
  • Autor y enlace.
  • Fecha de publicación y modificación.
  • URL principal del artículo.

Script que maneja Tooltip en NichoClean

case 'tooltip':
  html += `
    <article class='item-tooltip' itemscope itemtype='https://schema.org/Article' title='${titulo}'>
      <a href='${link}' itemprop='url' title='${titulo}'>
        <img alt='Imagen del artículo: ${titulo}' itemprop='image' src='${media}'/>
      </a>
      ${metaDatos}
    </article>
  `;
  break;

Este fragmento genera cada miniatura y asigna el tooltip nativo del navegador mostrando el título del artículo.

  • El contenido metaDatos incluye los metadatos estructurados para SEO.
  • No se muestra el texto directamente; solo aparece al pasar el ratón sobre la imagen.

Ventajas de usar Tooltip

  • Mantiene la interfaz limpia y minimalista.
  • Interactivo: el título aparece solo al pasar el cursor.
  • Flexible: funciona en index, posts y páginas estáticas.
  • SEO-friendly: genera Schema.org de cada artículo automáticamente.
  • Configuración rápida: solo cambias data-etiqueta y data-cantidad.

Personalización rápida

Si quieres mostrar, por ejemplo, 4 miniaturas de la etiqueta "tutoriales", solo cambia el shortcode:

<div class="galeria-feed tooltip" data-etiqueta="tutoriales" data-cantidad="4"></div>

Resultado de galeria-feed tooltip

La galería Tooltip en NichoClean v2.0 es perfecta para mostrar miniaturas de tus entradas, donde el título aparece al pasar el ratón, manteniendo un diseño limpio, minimalista y SEO-friendly.

Con solo modificar los atributos data-etiqueta y data-cantidad, puedes personalizar qué entradas se muestran y cuántas miniaturas aparecen, asegurando coherencia visual, interactividad y rendimiento óptimo en tu blog.