Tipografía

Conoce cómo NichoClean presenta los diferentes niveles de encabezado y los estilos básicos de texto. En este ejemplo puedes comprobar la jerarquía de títulos, distintos tamaños de texto, negritas, cursivas, texto tachado y enlaces.

Título Principal del Blog (h1)

Este es un párrafo de introducción. Aquí se puede colocar una descripción inicial o resumen del contenido.

Subtítulo Importante (h2)

Otro párrafo con algo de texto en negrita y texto en cursiva para mostrar énfasis.

Subsección o Título Interno (h3)

Este es un párrafo normal con un enlace de ejemplo para navegación interna o externa.

Encabezado de Nivel 4 (h4)

Este texto puede acompañar secciones menos importantes o de apoyo dentro del contenido.

Encabezado de Nivel 5 (h5)

Normalmente usado para notas pequeñas, etiquetas o metadatos secundarios.

Encabezado de Nivel 6 (h6)

Muy poco usado, pero útil para jerarquía muy específica o notas editoriales.

<h1>Título Principal del Blog (h1)</h1>
  <h2>Subtítulo Importante (h2)</h2>
  <h3>Subsección o Título Interno (h3)</h3>
  <h4>Encabezado de Nivel 4 (h4)</h4>
  <h5>Encabezado de Nivel 5 (h5)</h5>
  <h6>Encabezado de Nivel 6 (h6)</h6>

Text size

The smallest

Little

Normal

Medium

Great

The biggest

<p style="font-size: 0.75rem;">The smallest</p>
  <p style="font-size: 0.875rem;">Little</p>
  <p style="font-size: 1rem;">Normal</p>
  <p style="font-size: 1.25rem;">Medium</p>
  <p style="font-size: 1.5rem;">Great</p>
  <p style="font-size: 2rem;">The biggest</p>

Emphasis

This is bold text

This is bold text

This is italic text

This is italic text

Strikethrough

This is a link

<p><strong>This is bold text</strong></p>
  <p><b>This is bold text</b></p>
  <p><em>This is italic text</em></p>
  <p><i>This is italic text</i></p>
  <p><s>Strikethrough</s></p>
  <p><a href="#">This is a link</a></p>

Listas HTML

NichoClean incluye diferentes estilos de listas que puedes utilizar directamente desde el editor de Blogger. No necesitas agregar CSS: solo utiliza la estructura HTML correspondiente.

Lista no ordenada

  • Elemento uno
    • Subelemento A
    • Subelemento B
  • Elemento dos
  • Elemento tres
<ul>
      <li>Elemento uno
        <ul>
          <li>Subelemento A</li>
          <li>Subelemento B</li>
        </ul>
      </li>
      <li>Elemento dos</li>
      <li>Elemento tres</li>
    </ul>

Lista ordenada

  1. Paso uno
    1. Subpaso 1
    2. Subpaso 2
  2. Paso dos
  3. Paso tres
<ol>
      <li>Paso uno
        <ol>
          <li>Subpaso 1</li>
          <li>Subpaso 2</li>
        </ol>
      </li>
      <li>Paso dos</li>
      <li>Paso tres</li>
    </ol>

Lista con viñeta azul

  • Elemento uno
    • Subelemento A
    • Subelemento B
  • Elemento dos
  • Elemento tres
<ul class="default">
      <li>Elemento uno
        <ul>
          <li>Subelemento A</li>
          <li>Subelemento B</li>
        </ul>
      </li>
      <li>Elemento dos</li>
      <li>Elemento tres</li>
    </ul>

Lista con check

  • Elemento uno
    • Subelemento A
    • Subelemento B
  • Elemento dos
  • Elemento tres
<ul class="check">
      <li>Elemento uno
        <ul>
          <li>Subelemento A</li>
          <li>Subelemento B</li>
        </ul>
      </li>
      <li>Elemento dos</li>
      <li>Elemento tres</li>
    </ul>

Lista con X

  • Elemento uno
    • Subelemento A
    • Subelemento B
  • Elemento dos
  • Elemento tres
<ul class="x">
      <li>Elemento uno
        <ul>
          <li>Subelemento A</li>
          <li>Subelemento B</li>
        </ul>
      </li>
      <li>Elemento dos</li>
      <li>Elemento tres</li>
    </ul>

Contenedor especial para Home

Utiliza este contenedor cuando necesites colocar contenido, bloques personalizados o shortcodes dentro del Home y quieras disponer de un espacio con separación y espaciado controlados.

Contenido destacado

Este es un ejemplo de contenido dentro del contenedor especial. También puedes utilizar este espacio para insertar shortcodes o bloques personalizados. 

<div class="home-section">
  <div class="home-content">

    <h3>Contenido destacado</h3>

    <p>
      Este es un ejemplo de contenido dentro del contenedor especial.
      También puedes utilizar este espacio para insertar shortcodes o bloques personalizados.
    </p>

  </div>
</div>

Tarjetas de información destacada

Utiliza estas tarjetas para destacar información importante dentro de tus entradas o páginas. NichoClean incluye tres variantes: información general, tip o nota y advertencia.

Esta es una información general que quieres destacar al lector.
Este es un consejo o una nota útil para el lector.
Esta es una advertencia o precaución que conviene destacar. 
<div class="info-destacada">
  Esta es una información general que quieres destacar al lector.
</div>

<div class="info-tip">
  Este es un consejo o una nota útil para el lector.
</div>

<div class="info-alerta">
  Esta es una advertencia o precaución que conviene destacar.
</div>

Reproductor de audio HTML5

Utiliza este reproductor para insertar archivos de audio dentro de tus entradas o páginas. NichoClean aplica automáticamente el diseño al contenedor.

Audio de ejemplo
Abrir audio 
<div class="tb-audio">

  <div class="tb-audio__title">Audio de ejemplo</div>

  <audio controls>
    <source src="URL-DEL-AUDIO.mp3" type="audio/mpeg">
    Tu navegador no admite la reproducción de audio HTML5.
  </audio>

  <a href="URL-DEL-AUDIO.mp3" target="_blank" rel="noopener">
    Abrir audio
  </a>

</div>

Botones HTML

NichoClean incluye diferentes estilos de botones que puedes utilizar en tus entradas y páginas. Puedes combinarlos con las variantes de color, forma y estilo invertido.

Botón Verde Botón Rojo Botón Azul Botón Naranja Botón Gris Botón Negro

Botones variantes

Botón #1 Botón #2 Botón #3 Botón #4 Botón #5 Botón #6 Link Normal Link Invertido Link Descargar Link Verde

Clases disponibles

  • .boton → botón normal.
  • .boton-descarga → botón para descargas.
  • .invertido → cambia el botón a estilo invertido.
  • .redondo → aplica bordes completamente redondeados.
  • .verde, .rojo, .azul, .naranja, .gris y .negro → variantes de color.

Las clases se pueden combinar. Por ejemplo:

 <!-- BOTONES NORMALES -->
   <a href="#" class="boton verde">Botón Verde</a>
   <a href="#" class="boton rojo">Botón Rojo</a>
  <a href="#" class="boton azul">Botón Azul</a>
  <a href="#" class="boton naranja">Botón Naranja</a>
  <a href="#" class="boton gris">Botón Gris</a>
  <a href="#" class="boton negro">Botón Negro</a>

  <!-- BOTÓN NORMAL -->
  <a href="#" class="boton verde">Botón #1</a>

  <!-- BOTÓN INVERTIDO -->
  <a href="#" class="boton invertido rojo">Botón #2</a>

  <!-- BOTÓN DESCARGA -->
  <a href="#" class="boton-descarga azul">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor">
      <path d="M.5 9.9V14a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V9.9a.5.5 0 0 1 1 0V14a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2V9.9a.5.5 0 0 1 1 0z"/>
      <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 1 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
    </svg>
    Botón #3
  </a>

  <!-- BOTÓN DESCARGA INVERTIDO -->
  <a href="#" class="boton-descarga invertido naranja">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor">
      <path d="M.5 9.9V14a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V9.9a.5.5 0 0 1 1 0V14a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2V9.9a.5.5 0 0 1 1 0z"/>
      <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 1 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
    </svg>
    Botón #4
  </a>

  <!-- BOTÓN REDONDO -->
  <a href="#" class="boton redondo gris">Botón #5</a>

  <!-- BOTÓN REDONDO INVERTIDO -->
  <a href="#" class="boton redondo invertido negro">Botón #6</a>

  <!-- BOTÓN NORMAL -->
  <a href="#" class="boton negro">Link Normal</a>
  <button class="boton verde">Button Normal</button>
  <input type="submit" class="boton azul" value="Input Normal">

  <!-- BOTÓN INVERTIDO -->
  <a href="#" class="boton invertido rojo">Link Invertido</a>
  <button class="boton invertido naranja">Button Invertido</button>
  <input type="submit" class="boton invertido gris" value="Input Invertido">

  <!-- BOTÓN DESCARGA -->
  <a href="#" class="boton-descarga negro">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor">
      <path d="M.5 9.9V14a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V9.9a.5.5 0 0 1 1 0V14a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2V9.9a.5.5 0 0 1 1 0z"/>
      <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 1 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
    </svg>
    Link Descargar
  </a>

  <button class="boton-descarga verde">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor">
      <path d="M.5 9.9V14a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V9.9a.5.5 0 0 1 1 0V14a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2V9.9a.5.5 0 0 1 1 0z"/>
      <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 1 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
    </svg>
    Button Descargar
  </button>

  <input type="submit" class="boton-descarga rojo" value="Input Descargar">
  
  <!-- BOTÓN REDONDO -->
  <a href="#" class="boton verde redondo">Link Verde</a>
  <button class="boton-descarga azul redondo">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor">
      <path d="M.5 9.9V14a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V9.9a.5.5 0 0 1 1 0V14a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2V9.9a.5.5 0 0 1 1 0z"/>
      <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 1 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
    </svg> Button Descarga
  </button>

Página de error 404

Puedes utilizar estas clases para crear una página 404 personalizada cuando quieras mostrar un mensaje de error y un enlace para regresar.

404
Página no encontrada
Lo sentimos, la página que buscas no existe o ha sido movida.
Volver al inicio 
<div class="error-container">
      <div class="error-code">404</div>
      <div class="error-message">Página no encontrada</div>
      <div class="error-description">
        Lo sentimos, la página que buscas no existe o ha sido movida.
      </div>
      <a href="/" class="error-link">Volver al inicio</a>
    </div>

Lista de publicaciones estilo foro

Utiliza este bloque para mostrar publicaciones en formato de foro, con una imagen, título y descripción. El diseño se adapta automáticamente a dispositivos móviles.

Imagen del post

Título del tema o entrada

Este es un pequeño resumen o introducción del tema. Muestra solo las primeras líneas del contenido de manera sencilla.

Imagen del post

Título del tema o entrada

Este es un pequeño resumen o introducción del tema. Muestra solo las primeras líneas del contenido de manera sencilla.

Imagen del post

Título del tema o entrada

Este es un pequeño resumen o introducción del tema. Muestra solo las primeras líneas del contenido de manera sencilla.

<section class="foro-lista">
  <article class="foro-post">      
    <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Imagen del post" class="foro-img"/>
    <div class="foro-contenido">
      <a href="/post-2"><h3 class="foro-titulo">Título del tema o entrada</h3></a>          
      <p class="foro-extracto">Este es un pequeño resumen o introducción del tema. Muestra solo las primeras líneas del contenido de manera sencilla.</p>
    </div>
  </article>
  <article class="foro-post">
    <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Imagen del post" class="foro-img">
    <div class="foro-contenido">
         <a href="/post-2"><h3 class="foro-titulo">Título del tema o entrada</h3></a>   
      <p class="foro-extracto">Este es un pequeño resumen o introducción del tema. Muestra solo las primeras líneas del contenido de manera sencilla.</p>
    </div>
  </article>
  <article class="foro-post">
    <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Imagen del post" class="foro-img">
    <div class="foro-contenido">
        <a href="/post-2"><h3 class="foro-titulo">Título del tema o entrada</h3></a>   
      <p class="foro-extracto">Este es un pequeño resumen o introducción del tema. Muestra solo las primeras líneas del contenido de manera sencilla.</p>
    </div>
  </article>
</section>

Bloques de código

NichoClean incluye estilos para mostrar código dentro de tus entradas y páginas. Puedes utilizar código inline para fragmentos pequeños o bloques completos para mostrar HTML, CSS, JavaScript y otros ejemplos.

Código inline

Para mostrar un comando o fragmento de código dentro de un texto, utiliza margin: 0 auto;. 

<code>margin: 0 auto;</code>

Bloque de código

<pre><code>
// Bloque de código
function saludar() {
  console.log("Hola mundo");
}
  </code></pre>

Alertas

Utiliza estas alertas para destacar información importante dentro de tus entradas o páginas. NichoClean incluye cuatro variantes: advertencia, información, éxito y error.

⚠️ Advertencia: Este contenido requiere especial atención.
ℹ️ Información: Aquí puedes mostrar un dato importante para el lector.
✅ Éxito: La operación se ha realizado correctamente.
❌ Error: No se pudo completar la operación solicitada. 
<div class="alert warning">
  <strong>⚠️ Advertencia:</strong> Este contenido requiere especial atención.
</div>

<div class="alert info">
  <strong>ℹ️ Información:</strong> Aquí puedes mostrar un dato importante para el lector.
</div>

<div class="alert success">
  <strong>✅ Éxito:</strong> La operación se ha realizado correctamente.
</div>

<div class="alert error">
  <strong>❌ Error:</strong> No se pudo completar la operación solicitada.
</div>

Citas destacadas

Utiliza el elemento <blockquote> para destacar una cita, frase o referencia dentro de tus entradas y páginas. NichoClean aplica automáticamente el diseño.

Una buena idea puede convertirse en un gran proyecto cuando se pone en práctica. 
<blockquote>
  Una buena idea puede convertirse en un gran proyecto cuando se pone en práctica.
</blockquote>

Tabla HTML adaptable

Utiliza este bloque para crear tablas sencillas dentro de tus entradas o páginas. En pantallas pequeñas, la tabla puede desplazarse horizontalmente para evitar que el contenido se deforme.

Producto Precio Estado
Producto A $10 Disponible
Producto B $15 Disponible
Producto C $20 Agotado 
<div class="tabla-responsive">

  <table class="tabla-minimalista">

    <thead>
      <tr>
        <th>Producto</th>
        <th>Precio</th>
        <th>Estado</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Producto A</td>
        <td>$10</td>
        <td>Disponible</td>
      </tr>

      <tr>
        <td>Producto B</td>
        <td>$15</td>
        <td>Disponible</td>
      </tr>
    </tbody>

  </table>

</div>

Caja de suscripción

Utiliza este bloque para añadir un formulario de suscripción dentro de tus entradas o páginas. NichoClean proporciona el diseño de la caja, el campo de correo, las políticas y el botón de envío.

Suscríbete a nuestro boletín

Recibe actualizaciones y novedades directamente en tu correo.

<section class="cta-suscripcion">
  <h2>Suscríbete a nuestro boletín</h2>
  <p>Recibe actualizaciones y novedades directamente en tu correo.</p>
  <form 
    action="https://xxxxx.usX.list-manage.com/subscribe/post?u=xxxxxxx&id=xxxxxx" 
    method="POST" 
    target="_blank" 
    novalidate 
    class="form-suscripcion"
  >
    <input 
      type="email" 
      name="EMAIL" 
      placeholder="Tu correo electrónico" 
      required 
      aria-label="Correo electrónico"
    >

    <label class="checkbox-politica">
      <input type="checkbox" required aria-required="true" />
      Acepto la <a href="/politica-de-privacidad" target="_blank" rel="noopener noreferrer">política de privacidad</a>
    </label>

    <!-- Campo oculto para evitar bots de Mailchimp -->
    <div style="position: absolute; left: -5000px;" aria-hidden="true">
      <input type="text" name="b_xxxxxxx_xxxxxxx" tabindex="-1" value="">
    </div>

    <button type="submit">Suscribirme</button>
  </form>
</section>

Formulario de suscripción horizontal

Esta variante permite mostrar el campo de correo y el botón de suscripción en una misma línea. En dispositivos móviles se adapta automáticamente colocando el botón debajo del campo. 

<section class="cta-suscripcion">
  <form 
    class="form-suscripcion-horizontal" 
    action="https://xxxxxx.usX.list-manage.com/subscribe/post?u=XXXXXXXXX&id=XXXXXXXXX" 
    method="POST" 
    target="_blank" 
    novalidate
  >
    <label for="email">Suscríbete:</label>

    <div class="input-boton">
      <input 
        type="email" 
        id="email" 
        name="EMAIL" 
        placeholder="Tu correo electrónico" 
        required 
        aria-label="Correo electrónico"
      >
      <button type="submit">Enviar</button>
    </div>

    <label class="checkbox-politica">
      <input type="checkbox" required aria-required="true">
      Acepto la <a href="/politica-de-privacidad" target="_blank" rel="noopener noreferrer">política de privacidad</a>
    </label>

    <!-- Campo oculto anti-spam de Mailchimp -->
    <div style="position: absolute; left: -5000px;" aria-hidden="true">
      <input type="text" name="b_XXXXXXXXX_XXXXXXXXX" tabindex="-1" value="">
    </div>
  </form>
</section>

Llamada a la acción (CTA)

Utiliza este bloque para destacar una llamada a la acción dentro de tus entradas o páginas. Puedes cambiar el título, el texto, el enlace y el estilo del botón según tus necesidades.

Únete a nuestra comunidad

Recibe tips exclusivos, noticias y promociones directamente en tu correo.

<section class="cta-izquierda">
  <h2>Únete a nuestra comunidad</h2>
  <p>Recibe tips exclusivos, noticias y promociones directamente en tu correo.</p>
  <button class="boton">Suscribirme</button>
</section>

CTA con imagen

Esta variante permite combinar una imagen con un título, una descripción y un botón de acción. En dispositivos móviles, la imagen pasa automáticamente a la parte superior.

Imagen CTA

Suscríbete a nuestro boletín

Recibe novedades, artículos y consejos directamente en tu correo. Sin spam, lo prometemos.

Suscribirme 
<div class="cta-con-imagen-vertical">
  <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Imagen CTA">
  <div class="contenido">
    <h2>Suscríbete a nuestro boletín</h2>
    <p>Recibe novedades, artículos y consejos directamente en tu correo. Sin spam, lo prometemos.</p>
    <a href="#" class="boton">Suscribirme</a>
  </div>
</div>

Formulario de contacto

Utiliza este formulario para crear una sección de contacto dentro de una página o entrada. El diseño se adapta automáticamente al estilo de NichoClean. 

<form action="https://formspree.io/f/XXXXXXXX" method="POST" class="contact-form">
  <div class="form-group">
    <label for="name">Nombre completo</label>
    <input type="text" id="name" name="name" required>
  </div>

  <div class="form-group">
    <label for="email">Correo electrónico</label>
    <input type="email" id="email" name="email" required>
  </div>

  <div class="form-group">
    <label for="subject">Asunto</label>
    <input type="text" id="subject" name="subject" required>
  </div>

  <div class="form-group">
    <label for="message">Mensaje</label>
    <textarea id="message" name="message" rows="5" required></textarea>
  </div>

  <div class="form-group checkbox">
    <input type="checkbox" id="policy" name="RPGD" value="Acepté la política de datos" required>
    <label for="policy">He leído y acepto la <a href="https://nichoclean.owinile.com/p/politica-de-privacidad.html">política de privacidad</a></label>
  </div>
  
  <!-- recaptcha SITE -->
<div class="form-group">
  
  <div class="g-recaptcha" data-sitekey="6LcWugITAAAAAEOdJr7ypfpArgVw3Vn_-GXi3A2w"></div> <!-- replace with your recaptcha SITE key not secret key -->
</div>

    <button type="submit" class="btn-submit">
      <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor">
        <path d="M22 2 11 13"></path>
        <path d="m22 2-7 20-4-9-9-4z"></path>
      </svg>
      Enviar mensaje
    </button>
</form>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Estilos para imágenes

Ejemplos de diferentes formas de presentar imágenes dentro de entradas y páginas: centradas, con leyenda, con borde y sombra, junto a contenido, en tarjetas, galerías y con elementos superpuestos.

Imagen centrada básica

Imagen sola, centrada, adaptable a móviles. Ideal para mostrar productos, capturas, gráficos.

Imagen ilustrativa SEO 
<figure class="bloque-imagen centrada">
  <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Imagen ilustrativa SEO">
</figure>

Imagen con leyenda (caption)

Imagen con texto explicativo debajo (SEO + UX). Bueno para infografías o imágenes ilustrativas.

Gorrión posado en una rama al atardecer
Gorrión posado en una rama al atardecer – Imagen ilustrativa para contenido SEO.
<figure class="bloque-imagen leyenda">
  <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Gorrión posado en una rama al atardecer">
  <figcaption>Gorrión posado en una rama al atardecer – Imagen ilustrativa para contenido SEO.</figcaption>
</figure>

Imagen con borde y sombra sutil

Estilo limpio y profesional. Da protagonismo sin romper el diseño minimalista.

Gorrión entre hojas verdes con luz natural 
<figure class="bloque-imagen borde-sombra">
  <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Gorrión entre hojas verdes con luz natural">
</figure>

Imagen con texto lateral (izquierda o derecha)

Formato tipo "media + contenido". Útil para análisis de producto, guías o reviews.

Gorrión en rama

Gorrión en su entorno natural

Los gorriones son aves comunes pero fascinantes. Esta imagen ilustra su comportamiento en hábitat abierto, ideal para estudios de comportamiento y contenido SEO sobre aves urbanas o rurales.

Gorrión en rama

Gorrión en su entorno natural

Los gorriones son aves comunes pero fascinantes. Esta imagen ilustra su comportamiento en hábitat abierto, ideal para estudios de comportamiento y contenido SEO sobre aves urbanas o rurales.

<div class="bloque-imagen-lateral">
  <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Gorrión en rama" loading="lazy">
  <div class="contenido">
    <h3>Gorrión en su entorno natural</h3>
    <p>Los gorriones son aves comunes pero fascinantes. Esta imagen ilustra su comportamiento en hábitat abierto, ideal para estudios de comportamiento y contenido SEO sobre aves urbanas o rurales.</p>
  </div> 
</div>

<div class="bloque-imagen-lateral derecha">
  <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Gorrión en rama" loading="lazy">
  <div class="contenido">
    <h3>Gorrión en su entorno natural</h3>
    <p>Los gorriones son aves comunes pero fascinantes. Esta imagen ilustra su comportamiento en hábitat abierto, ideal para estudios de comportamiento y contenido SEO sobre aves urbanas o rurales.</p>
  </div>
</div>

Imagen destacada tipo tarjeta

Imagen con fondo, borde, título arriba o abajo. Ideal para mini-secciones o bloques promocionales.

Gorrión en enfoque natural

Descubre más sobre los gorriones

<div class="tarjeta-imagen-destacada">
  <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Gorrión en enfoque natural" loading="lazy">
  <div class="contenido">
    <h3>Descubre más sobre los gorriones</h3>
  </div>
</div>

Galería de imágenes responsiva (2-3 columnas)

Varias imágenes en rejilla, adaptadas a móvil. Perfecta para mostrar variaciones o ejemplos.

Imagen 1 Imagen 2 Imagen 3 Imagen 4 Imagen 5 Imagen 5 
<div class="galeria-imagenes">
  <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Imagen 1" loading="lazy">
  <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Imagen 2" loading="lazy">
  <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Imagen 3" loading="lazy">
  <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Imagen 4" loading="lazy">
  <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Imagen 5" loading="lazy">
  <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Imagen 5" loading="lazy">
</div>

clúster de imágenes

Ejemplos de uso: "Clúster visual de categorías" "Clúster de productos destacados" "Clúster temático enlazado"

Imagen 1 Gorrión en rama Imagen 2 Ave en vuelo Imagen 3 Pico brillante Imagen 1 Gorrión en rama Imagen 2 Ave en vuelo Imagen 3 Pico brillante 
<div class="galeria-enlazada">
  <a href="https://store.njalo.owinile.com/search/label/theme" class="item">
    <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Imagen 1" loading="lazy">
    <span>Gorrión en rama</span>
  </a>
  <a href="https://store.njalo.owinile.com/search/label/theme" class="item">
    <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Imagen 2" loading="lazy">
    <span>Ave en vuelo</span>
  </a>
  <a href="https://store.njalo.owinile.com/search/label/theme" class="item">
    <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Imagen 3" loading="lazy">
    <span>Pico brillante</span>
  </a>
   <a href="https://store.njalo.owinile.com/search/label/theme" class="item">
    <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Imagen 1" loading="lazy">
    <span>Gorrión en rama</span>
  </a>
  <a href="https://store.njalo.owinile.com/search/label/theme" class="item">
    <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Imagen 2" loading="lazy">
    <span>Ave en vuelo</span>
  </a>
  <a href="https://store.njalo.owinile.com/search/label/theme" class="item">
    <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Imagen 3" loading="lazy">
    <span>Pico brillante</span>
  </a>
</div>

Imagen con etiqueta/insignia (badge)

Muestra una etiqueta tipo “Recomendado” o “Top 1”. Llama la atención del usuario y del lector rápido.

Gorrión recomendado Top 1 
<div class="imagen-con-badge">
  <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Gorrión recomendado" loading="lazy">
  <span class="badge">Top 1</span>
</div>

Imagen con overlay (texto encima)

Título o frase encima de la imagen. Ideal para CTA visuales o destacar secciones.

Frase destacada
Explora nuestros temas más populares
<div class="imagen-overlay">
  <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Frase destacada" loading="lazy">
  <div class="overlay-texto">Explora nuestros temas más populares</div>
</div>

Formatos de texto

Ejemplos para organizar contenido en columnas o combinar texto con imágenes y vídeos. Estos formatos se adaptan automáticamente a pantallas pequeñas.

Columnas básicas

Divides texto en varias columnas para facilitar lectura, tipo revista o periódico.

Este es un ejemplo de texto distribuido en varias columnas.

El contenido continúa en la siguiente columna para aprovechar mejor el espacio disponible.

En dispositivos móviles las columnas se convierten automáticamente en una sola.

<div class="text-columns">
<p>Este es un ejemplo de texto distribuido en varias columnas.</p> 
<p>El contenido continúa en la siguiente columna para aprovechar mejor el espacio disponible.</p>
<p>En dispositivos móviles las columnas se convierten automáticamente en una sola.</p>
</div>

Columnas anidadas

Columnas dentro de columnas, útil para secciones o bloques complejos (como listas dentro de columnas).

Texto columna 1, párrafo 1.

Texto columna 1, párrafo 2.

Texto columna 2, párrafo 1.

Texto columna 2, párrafo 2.

<div class="text-columns nested-columns">
  <div class="sub-column">
    <p>Texto columna 1, párrafo 1.</p>
    <p>Texto columna 1, párrafo 2.</p>
  </div>
  <div class="sub-column">
    <p>Texto columna 2, párrafo 1.</p>
    <p>Texto columna 2, párrafo 2.</p>
  </div>
</div>

Columnas con medios: imágenes, videos o textos mixtos

Diseño de columnas donde en una va un medio (imagen, video) y en otra texto, ideal para combinar contenido.

Ejemplo imagen

Título de la sección

Texto descriptivo que acompaña la imagen o video. Aquí puedes poner tu análisis, datos o cualquier contenido relevante.

<div class="media-columns">
  <div class="media">
    <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Ejemplo imagen" />
  </div>
  <div class="content">
    <h3>Título de la sección</h3>
    <p>Texto descriptivo que acompaña la imagen o video. Aquí puedes poner tu análisis, datos o cualquier contenido relevante.</p>
  </div>
</div>

Separadores visuales

Utiliza estos separadores para dividir secciones y mejorar la organización visual del contenido dentro de tus entradas o páginas.

Sección destacada
<!-- Línea horizontal sutil -->
<hr class="divider-line">

<!-- Separador con ícono decorativo -->
<div class="divider-icon">
  <i class='fas fa-leaf' aria-hidden='true'></i>
</div>

<!-- Separador doble con líneas finas -->
<div class="divider-double"></div>

<!-- Separador con texto centrado -->
<div class="divider-text"><span>Sección destacada</span></div>

<!-- Separador tipo bloque espaciador -->
<div class="divider-block"></div>

Acordeones

Utiliza los acordeones para organizar información en secciones desplegables y mantener el contenido más limpio y ordenado. NichoClean incluye diferentes formas de crear acordeones, desde una opción controlada con JavaScript hasta alternativas que funcionan directamente con HTML y CSS.

Acordeón con JS (toggle clase active)

Sección 1 - Título clickeable

Contenido de la sección 1. Aquí va texto o lo que necesites.

Sección 2 - Título clickeable

Contenido de la sección 2, más texto descriptivo.

<h2>Acordeón con JS (toggle clase active)</h2>
<div class="accordion" id="accordionJS">
  <div class="accordion-item">
    <div class="accordion-header">Sección 1 - Título clickeable</div>
    <div class="accordion-content">
      <p>Contenido de la sección 1. Aquí va texto o lo que necesites.</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Sección 2 - Título clickeable</div>
    <div class="accordion-content">
      <p>Contenido de la sección 2, más texto descriptivo.</p>
    </div>
  </div>
</div>

Acordeón solo CSS con checkbox oculto

Este contenido se muestra al marcar el checkbox.

Más contenido para esta sección oculta.

<h2>Acordeón solo CSS con checkbox oculto</h2>
<div class="accordion-css">
  <input type="checkbox" id="acc1" aria-controls="content1" />
  <label for="acc1" aria-expanded="false">Sección 1 - Haz clic para abrir</label>
  <div id="content1" class="content" role="region" aria-labelledby="acc1">
    <p>Este contenido se muestra al marcar el checkbox.</p>
  </div>

  <input type="checkbox" id="acc2" aria-controls="content2" />
  <label for="acc2" aria-expanded="false">Sección 2 - Otro contenido oculto</label>
  <div id="content2" class="content" role="region" aria-labelledby="acc2">
    <p>Más contenido para esta sección oculta.</p>
  </div>
</div>

Acordeón con etiqueta <details> (HTML5 nativo)

Sección 1 - Expandir / Colapsar

Contenido dentro de details. Muy simple y compatible.

Sección 2 - Otro ejemplo

Otro bloque con contenido oculto hasta que se expanda.

<h2>Acordeón con etiqueta <details> (HTML5 nativo)</h2>
<div class="accordion-details">
  <details>
    <summary>Sección 1 - Expandir / Colapsar</summary>
    <p>Contenido dentro de details. Muy simple y compatible.</p>
  </details>
  <details>
    <summary>Sección 2 - Otro ejemplo</summary>
    <p>Otro bloque con contenido oculto hasta que se expanda.</p>
  </details>
</div>

Tarjetas

Utiliza estas tarjetas para presentar información, avisos, enlaces o contenido destacado de forma visual y ordenada. NichoClean incluye diferentes variantes, desde tarjetas clásicas hasta tarjetas tipo lista para enlaces de interés.

Enlaces de Interes

Imagen Gorrión 1

Título de la tarjeta 1
Imagen Gorrión 2

Título de la tarjeta 2
Imagen Gorrión 3

Título de la tarjeta 3
Imagen Gorrión 4

Título de la tarjeta 4

 
<!-- === HTML: CARD LISTA CLICABLE EN DOS COLUMNAS === -->
<div class="cards-grid">
  <div class="card-lista">
    <a href="#">
      <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Imagen Gorrión 1">
      <h3>Título de la tarjeta 1</h3>
    </a>
  </div>

  <div class="card-lista">
    <a href="#">
      <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Imagen Gorrión 2">
      <h3>Título de la tarjeta 2</h3>
    </a>
  </div>

  <div class="card-lista">
    <a href="#">
      <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Imagen Gorrión 3">
      <h3>Título de la tarjeta 3</h3>
    </a>
  </div>

  <div class="card-lista">
    <a href="#">
      <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Imagen Gorrión 4">
      <h3>Título de la tarjeta 4</h3>
    </a>
  </div>
</div>

Tarjetas

Imagen

Título de la Card

Descripción breve o contenido de la tarjeta para mostrar información relevante.

Leer más 
<!-- === Card clásica con imagen === -->
<div class="tarjeta">
  <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Imagen">
  <div class="card-content">
    <h3 class="card-title">Título de la Card</h3>
    <p class="card-text">Descripción breve o contenido de la tarjeta para mostrar información relevante.</p>
    <a href="#" class="card-button">Leer más</a>
  </div>
</div>
Imagen horizontal

Título Horizontal

Contenido alineado horizontalmente, ideal para mostrar listas o elementos visuales breves.

Detalles 
<!-- === Card horizontal === -->
<div class="tarjeta card-horizontal">
  <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Imagen horizontal">
  <div class="card-content">
    <h3 class="card-title">Título Horizontal</h3>
    <p class="card-text">Contenido alineado horizontalmente, ideal para mostrar listas o elementos visuales breves.</p>
    <a href="#" class="card-button">Detalles</a>
  </div>
</div>

Card Destacada

Tarjeta sin imagen pero con fondo de color para destacar una sección o aviso.

Ver más 
<!-- === Card con fondo de color sin imagen === -->
<div class="tarjeta card-colored">
  <div class="card-content">
    <h3 class="card-title">Card Destacada</h3>
    <p class="card-text">Tarjeta sin imagen pero con fondo de color para destacar una sección o aviso.</p>
    <a href="#" class="card-button">Ver más</a>
  </div>
</div>

Aviso Importante

Este es un mensaje de aviso o notificación sin imagen, ideal para comunicar algo clave.

<!-- === Card con ícono (sin imagen) === -->
<div class="tarjeta card-icon">
  <div class="icon"><i class='fas fa-bullhorn' aria-hidden='true'></i></div>
  <div class="card-content">
    <h3 class="card-title">Aviso Importante</h3>
    <p class="card-text">Este es un mensaje de aviso o notificación sin imagen, ideal para comunicar algo clave.</p>
  </div>
</div>

Nota informativa

Card limpia solo con texto, útil para mensajes o citas dentro del contenido.

<!-- === Card simple (solo texto) === -->
<div class="tarjeta card-simple">
  <div class="card-content">
    <h3 class="card-title">Nota informativa</h3>
    <p class="card-text">Card limpia solo con texto, útil para mensajes o citas dentro del contenido.</p>
  </div>
</div>

Preguntas frecuentes (FAQ)

Organiza las preguntas y respuestas más importantes de tu contenido en un formato desplegable, limpio y fácil de consultar. Puedes añadir tantas preguntas como necesites sin utilizar JavaScript.

Preguntas Frecuentes

¿Qué es Nombre del producto o servicio?

Es una solución diseñada para ayudarte a breve explicación de lo que hace el producto o servicio.

¿Cómo puedo contratar o usar el servicio?

Puedes hacerlo a través de nuestra página de contacto o siguiendo las instrucciones en el artículo principal.

¿Tiene algún costo?

Algunos de nuestros recursos son gratuitos, pero ofrecemos versiones premium con más características.

¿Puedo usarlo en Blogger o en otros CMS?

Sí, es totalmente compatible con Blogger, WordPress, y otros sistemas que acepten HTML/CSS.

<div class="faq-section">
  <h2>Preguntas Frecuentes</h2>

  <details>
    <summary>¿Qué es <strong>Nombre del producto o servicio</strong>?</summary>
    <p>Es una solución diseñada para ayudarte a <em>breve explicación de lo que hace el producto o servicio</em>.</p>
  </details>

  <details>
    <summary>¿Cómo puedo contratar o usar el servicio?</summary>
    <p>Puedes hacerlo a través de nuestra página de contacto o siguiendo las instrucciones en el artículo principal.</p>
  </details>

  <details>
    <summary>¿Tiene algún costo?</summary>
    <p>Algunos de nuestros recursos son gratuitos, pero ofrecemos versiones premium con más características.</p>
  </details>

  <details>
    <summary>¿Puedo usarlo en Blogger o en otros CMS?</summary>
    <p>Sí, es totalmente compatible con Blogger, WordPress, y otros sistemas que acepten HTML/CSS.</p>
  </details>
</div>

Buscador

Este buscador permite localizar contenido dentro del blog de forma rápida y sencilla. En dispositivos móviles se adapta automáticamente al ancho disponible para facilitar su uso desde pantallas pequeñas.

<div class="post-header">
    <form class="search-box" action="/search" method="get">
    <input type="text" name="q" placeholder="Buscar..." aria-label="Buscar" required>
    <button type="submit" aria-label="Buscar"><i class='fas fa-search' aria-hidden='true'></i></button>
  </form>
</div>

Buscador y resultados AJAX

El buscador de NichoClean muestra los resultados de forma dinámica sin necesidad de recargar toda la página. Los resultados se presentan en una lista sencilla con el título, una breve descripción y un enlace para consultar más resultados.

<div class="post-header">
  <form class="search-box" id="ajax-search-form" action="/search" method="get">
    <input type="text" id="ajax-search-input" name="q" placeholder="Buscar..." aria-label="Buscar" required>
    <button type="submit" aria-label="Buscar"><i class='fas fa-search' aria-hidden='true'></i></button>
  </form>
</div>

<!-- Contenedor de resultados dinámicos -->
<div id="search-results"></div>

Contenedor de artículos

Utiliza este contenedor para presentar contenido personalizado en el Home o Index del blog dentro de una caja limpia, con fondo, borde y espaciado. También admite títulos, párrafos y listas con viñetas adaptadas automáticamente.

Contenido destacado

Este es un ejemplo de contenido dentro del contenedor. Puedes utilizarlo para presentar información adicional en el Home.

Características

  • Diseño limpio y ordenado
  • Contenido adaptable a diferentes pantallas
  • Admite listas y sublistas
    • Primer elemento secundario
    • Segundo elemento secundario
<div class="index-contenedor">
  <h2>Contenido destacado</h2>

  <p>
    Este es un ejemplo de contenido dentro del contenedor.
    Puedes utilizarlo para presentar información adicional en el Home.
  </p>

  <h3>Características</h3>

  <ul>
    <li>Diseño limpio y ordenado</li>
    <li>Contenido adaptable a diferentes pantallas</li>
    <li>Admite listas y sublistas
      <ul>
        <li>Primer elemento secundario</li>
        <li>Segundo elemento secundario</li>
      </ul>
    </li>
  </ul>
</div>

Ficha de producto destacado

Utiliza esta ficha para presentar productos de forma clara y atractiva. Incluye imagen, descripción, características, precio, disponibilidad y botones de acción como “Comprar ahora” o “Añadir al carrito”. Su diseño se adapta automáticamente a dispositivos móviles.

Nombre del producto

Nombre del producto

Descripción breve del producto y sus principales características.

  • Característica principal
  • Segunda característica
  • Tercera característica
Precio: $ 29.99 Disponible
Comprar ahora Añadir al carrito 
<div class="ficha-producto">

  <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Nombre del producto">

  <div class="ficha-info">

<h2>Nombre del producto</h2>

<p>
  Descripción breve del producto y sus principales características.
</p>

<ul>
  <li>Característica principal</li>
  <li>Segunda característica</li>
  <li>Tercera característica</li>
</ul>

<div class="ficha-precio">
  <span class="etiqueta-precio">Precio:</span>
  <span class="precio-signo">$</span>
  <span class="precio-valor precio">29.99</span>
  <span class="disponibilidad">Disponible</span>
</div>

<a href="URL-DE-COMPRA" class="ficha-boton" id="pago">
  Comprar ahora
</a>

<a href="URL-DEL-CARRITO" class="ficha-boton-secundario">
  Añadir al carrito
</a>

  </div>

</div>

Tabla comparativa

Utiliza esta tabla para comparar productos, servicios o diferentes opciones de forma clara. Permite incluir imágenes, títulos enlazados y botones de compra, mientras que en dispositivos móviles cada fila se adapta automáticamente a un formato de tarjeta.

Imagen Producto Descripción Precio Comprar
Producto 1 Producto 1 Compacto, duradero y fácil de usar. $29.99 Comprar
Producto 2 Producto 2 Ideal para exteriores y muy ligero. $34.50 Comprar 
<table class="tabla-comparativa">
  <thead>
    <tr>
      <th>Imagen</th>
      <th>Producto</th>
      <th>Descripción</th>
      <th>Precio</th>
      <th>Comprar</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Imagen">
        <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Producto 1">
      </td>
      <td data-label="Producto">
        <a href="#" class="titulo-producto">Producto 1</a>
      </td>
      <td data-label="Descripción">
        Compacto, duradero y fácil de usar.
      </td>
      <td data-label="Precio">
        $29.99
      </td>
      <td data-label="Comprar">
        <a href="#" class="boton-comprar" target="_blank" rel="nofollow">Comprar</a>
      </td>
    </tr>

    <tr>
      <td data-label="Imagen">
        <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Producto 2">
      </td>
      <td data-label="Producto">
        <a href="#" class="titulo-producto">Producto 2</a>
      </td>
      <td data-label="Descripción">
        Ideal para exteriores y muy ligero.
      </td>
      <td data-label="Precio">
        $34.50
      </td>
      <td data-label="Comprar">
        <a href="#" class="boton-comprar" target="_blank" rel="nofollow">Comprar</a>
      </td>
    </tr>
  </tbody>
</table>

Entradas relacionadas

Utiliza este bloque para mostrar una selección de publicaciones relacionadas mediante tarjetas compactas con imagen y título. Es una opción útil para crear manualmente secciones de contenido destacado o enlaces hacia otros artículos del blog.

<section class="related-posts" aria-label="Entradas relacionadas">
  <h3>Entradas Relacionadas</h3>
  <div class="related-list">

    <article class="related-item">
      <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Artículo relacionado 1">
      <div class="related-content">
        <a href="#" title="Título del artículo relacionado 1">Título del artículo relacionado 1</a>
      </div>
    </article>

    <article class="related-item">
      <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Artículo relacionado 2">
      <div class="related-content">
        <a href="#" title="Título del artículo relacionado 2">Título del artículo relacionado 2</a>
      </div>
    </article>

    <article class="related-item">
      <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Artículo relacionado 3">
      <div class="related-content">
        <a href="#" title="Título del artículo relacionado 3">Título del artículo relacionado 3</a>
      </div>
    </article>

  </div>
</section>

Grid de posts

Utiliza este bloque para mostrar publicaciones en formato de cuadrícula. Las tarjetas se distribuyen automáticamente según el espacio disponible y se adaptan a diferentes tamaños de pantalla, incluyendo un efecto visual al pasar el cursor sobre cada publicación.

<section class="grid-posts">
          <div class="grid">
        <article>
          <a href="/post-1">
            <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Imagen del post 1" loading="lazy">
            <h3>Guía para empezar un blog en 2025</h3>
          </a>
          <p>Descubre los pasos esenciales para lanzar tu blog profesional y optimizarlo desde el primer día.</p>
        </article>

        <article>
          <a href="/post-2">
            <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Imagen del post 2" loading="lazy">
            <h3>Cómo ganar dinero con AdSense</h3>
          </a>
          <p>Aprende cómo configurar anuncios, elegir un buen nicho y maximizar tus ingresos.</p>
        </article>

        <article>
          <a href="/post-3">
            <img src="https://cdn.pixabay.com/photo/2025/07/17/14/14/sparrow-9719599_1280.jpg" alt="Imagen del post 3" loading="lazy">
            <h3>Optimización web para Core Web Vitals</h3>
          </a>
          <p>Mejora la velocidad de tu sitio, reduce errores CLS y ofrece una mejor experiencia al usuario.</p>
        </article>
          
      </div>
    </section>

Clases auxiliares

Este bloque incluye pequeñas clases de apoyo para controlar elementos dentro del contenido. La clase none permite ocultar completamente un elemento, mientras que la regla aplicada a a[imageanchor] elimina el margen automático que Blogger puede añadir a las imágenes enlazadas.

<!-- Ocultar un elemento -->
<div class="none">
  Este contenido permanece oculto.
</div>

<!-- Imagen enlazada sin margen automático de Blogger -->
<a href="URL-DEL-ENLACE" imageanchor="1">
  <img src="URL-DE-LA-IMAGEN.jpg" alt="Imagen de ejemplo">
</a>