Destacados en tu Blog: 4 Tarjetas Modernas + Botón (fácil y responsive)

Con este módulo podrás mostrar 4 artículos destacados con imagen y título, más un botón para llevar al lector a más contenidos. Se ve moderno, funciona en celular y en computadora, y no necesitas saber programación.

¿Qué es este módulo?

Tarjetas: cada cajita muestra la imagen y el título de un artículo.
CTA: es un botón (por ejemplo: “Ver más artículos”) para guiar al lector.
Responsive: se adapta solo a móvil, tablet o PC.

Cómo instalarlo en Blogger (paso a paso)

Entra a Blogger → Entradas → Nueva entrada.
Cambia a la pestaña HTML (no “Redactar”).
Pega este contenido completo (incluye estilos y el módulo).
Reemplaza los textos URL_DEL_ARTICULO_X, URL_DE_IMAGEN_X, TÍTULO DEL ARTÍCULO X y URL_CTA por los tuyos.
Publica o guarda la entrada.

Bloque listo para usar (copia y pega)

Artículos que no te puedes perder

Selección curada para que descubras lo mejor de la semana.

Traductor de Banderas

Efectos para imagenes

Caja de 3 Articulos

Agrega un Carrusel

Ver más artículos

Cómo editarlo sin romper nada

Enlaces: cambia URL_DEL_ARTICULO_X por la dirección de tu post.
Imágenes: cambia URL_DE_IMAGEN_X por tu imagen (ideal horizontal 16:9).
Títulos: edita el texto “TÍTULO DEL ARTÍCULO X”.
Botón (CTA): reemplaza URL_CTA por una categoría/etiqueta o tu página de listados.

¿Y si mi plantilla borra los estilos?

Algunas plantillas eliminan la etiqueta <style> al guardar. Si te pasa, tienes dos opciones:

La rápida: publica así y, si se rompe, vuelve a editar la entrada y pega de nuevo el bloque.
La mejor: mueve el CSS a la plantilla para que quede fijo en todo el blog (abajo te explico).

Opcional: dejar los estilos fijos en todo el blog

Ve a Tema → Editar HTML.
Busca <b:skin><![CDATA[.
Pega el CSS (todo lo que está entre <style>...</style>) justo antes de ]]></b:skin>.
Guarda. A partir de ahora, en las entradas solo pega el HTML de las tarjetas y los CTA.

Personaliza los colores

Cambia estos valores al inicio del CSS para ajustar colores sin tocar más nada:

--g4-brand y --g4-brand-2: colores del botón.
--g4-card: fondo de cada tarjeta.
--g4-ink y --g4-ink-2: colores de texto.

Problemas frecuentes (y solución rápida)

Se ve todo en una columna en PC: falta el CSS. Asegúrate de que el bloque <style>…</style> está pegado o pásalo a la plantilla.
No se ven imágenes: revisa que la URL sea directa (termina en .jpg/.png) y pública.
El botón no tiene estilo: mismo caso, falta el CSS.
En móvil se corta raro: usa imágenes horizontales (16:9) y de buena calidad.

Listo: ya tienes un apartado de “Artículos Destacados” moderno, fácil y que convierte mejor. Cambia las URLs y títulos y publícalo.

Intalador

Copia el codigo y pegalo en la entrada de tu sitio web que mas desees

HTML<!-- ====== ESTILOS DEL MÓDULO (pueden quedarse en esta entrada) ====== -->
<style>
/* === Featured Grid 4 (g4) === */
:root{
  --g4-bg:#0b1220;            /* Fondo base del tema (por si lo usas)   */
  --g4-card:#111827;          /* Fondo de tarjeta                        */
  --g4-ink:#e5f0ff;           /* Color de texto principal                 */
  --g4-ink-2:#a9b7d1;         /* Color de texto suave                     */
  --g4-brand:#5eead4;         /* Color del botón (degradado inicio)       */
  --g4-brand-2:#60a5fa;       /* Color del botón (degradado fin)          */
  --g4-ring:#60a5fa33;        /* Color de subrayado al pasar el mouse     */
}

/* Contenedor centrado */
.g4-container{max-width:1100px;margin:0 auto;padding:0 16px}

/* Bloques de CTA */
.g4-cta{text-align:center;margin:24px 0}
.g4-cta-title{margin:0 0 6px;font-size:1.4rem}
.g4-cta-sub{margin:0;color:var(--g4-ink-2)}
.g4-btn{
  display:inline-block;margin-top:12px;padding:12px 18px;border-radius:12px;
  background:linear-gradient(135deg,var(--g4-brand),var(--g4-brand-2));
  color:#051225;font-weight:700;text-decoration:none;box-shadow:0 10px 24px #0006
}

/* Grilla de 4 columnas (se adapta en pantallas pequeñas) */
.g4-grid{
  display:grid;gap:16px;margin:18px 0;
  grid-template-columns:repeat(4,minmax(0,1fr))
}

/* Tarjeta */
.g4-card{
  background:var(--g4-card);border:1px solid #22314a;border-radius:16px;
  overflow:hidden;box-shadow:0 10px 24px #0008;transition:transform .25s,box-shadow .25s
}
.g4-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px #000a}

/* Imagen de la tarjeta con efecto suave */
.g4-media{display:block;position:relative;overflow:hidden;aspect-ratio:16/9}
.g4-media img{
  width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s
}
.g4-card:hover .g4-media img{transform:scale(1.06)}

/* Título de la tarjeta */
.g4-title{margin:12px 12px 16px;font-size:1rem;line-height:1.35}
.g4-title a{color:var(--g4-ink);text-decoration:none}
.g4-title a:hover{text-decoration:underline;text-decoration-color:var(--g4-ring)}

/* Adaptación a pantallas */
@media (max-width:1024px){.g4-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:768px){.g4-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){
  .g4-grid{grid-template-columns:1fr}
  .g4-cta-title{font-size:1.2rem}
}
/* === /Featured Grid 4 === */
</style>

<!-- CTA SUPERIOR (opcional) -->
<div class="g4-cta g4-container">
  <h3 class="g4-cta-title">Artículos que no te puedes perder</h3>
  <p class="g4-cta-sub">Selección curada para que descubras lo mejor de la semana.</p>
</div>

<!-- GRID 4 TARJETAS -->
<section class="g4-container" aria-label="Artículos destacados">
  <div class="g4-grid">
    <!-- Tarjeta 1 -->
    <article class="g4-card">
      <a class="g4-media" href="URL_DEL_ARTICULO_1" aria-label="Leer Artículo 1">
        <img src="URL_DE_IMAGEN_1" alt="Miniatura del Artículo 1" loading="lazy">
      </a>
      <h3 class="g4-title"><a href="URL_DEL_ARTICULO_1">TÍTULO DEL ARTÍCULO 1</a></h3>
    </article>

    <!-- Tarjeta 2 -->
    <article class="g4-card">
      <a class="g4-media" href="URL_DEL_ARTICULO_2" aria-label="Leer Artículo 2">
        <img src="URL_DE_IMAGEN_2" alt="Miniatura del Artículo 2" loading="lazy">
      </a>
      <h3 class="g4-title"><a href="URL_DEL_ARTICULO_2">TÍTULO DEL ARTÍCULO 2</a></h3>
    </article>

    <!-- Tarjeta 3 -->
    <article class="g4-card">
      <a class="g4-media" href="URL_DEL_ARTICULO_3" aria-label="Leer Artículo 3">
        <img src="URL_DE_IMAGEN_3" alt="Miniatura del Artículo 3" loading="lazy">
      </a>
      <h3 class="g4-title"><a href="URL_DEL_ARTICULO_3">TÍTULO DEL ARTÍCULO 3</a></h3>
    </article>

    <!-- Tarjeta 4 -->
    <article class="g4-card">
      <a class="g4-media" href="URL_DEL_ARTICULO_4" aria-label="Leer Artículo 4">
        <img src="URL_DE_IMAGEN_4" alt="Miniatura del Artículo 4" loading="lazy">
      </a>
      <h3 class="g4-title"><a href="URL_DEL_ARTICULO_4">TÍTULO DEL ARTÍCULO 4</a></h3>
    </article>
  </div>
</section>

<!-- CTA INFERIOR (opcional) -->
<div class="g4-cta g4-container">
  <a class="g4-btn" href="URL_CTA" rel="nofollow">Ver más artículos</a>
</div>

Crear tarjeta de 4 articulos

Destacados en tu Blog: 4 Tarjetas Modernas + Botón (fácil y responsive)

¿Qué es este módulo?

Cómo instalarlo en Blogger (paso a paso)