Código para hacer columnas responsive en Blogger [blogspot] sin editar la plantilla

por
Imagen digital en formato 16:9 que representa un diseño clásico de Blogger con tres columnas verticales sobre un fondo naranja con texturas suaves. En la parte superior izquierda aparece el logotipo de Blogger, seguido del título "Blogger" en tipografía moderna. Cada columna simula una entrada o widget con texto simulado y una estructura clara, destacando la funcionalidad de un blog organizado por secciones o bloques de contenido.

Añade columnas responsive a tus páginas o entradas en un blog de Blogger estos son los códigos que puedes usar sin modificar la plantilla.

🧠 ¿Cómo usarlo?

  1. Ve al editor de entrada o página de Blogger en la que quieras añadir contenidos en columnas.
  2. Haz clic en la pestaña «HTML» (no en «Redactar»).
  3. Pega el código donde quieras que aparezcan las columnas.
  4. Sustituye los títulos y textos por tus propios contenidos.

Puedes utilizar estos códigos en entradas, páginas y widgets.

✅ Código HTML para 2 columnas en Blogger

<style>
  .dos-columnas {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px 0;
  }
  .columna2 {
    flex: 1 1 calc(50% - 20px);
    background: #f0f0f0;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 8px;
    text-align: left;
  }
  @media screen and (max-width: 768px) {
    .columna2 {
      flex: 1 1 100%;
    }
  }
</style>

<div class="dos-columnas">
  <div class="columna2">
    <h3>Lanzadera A</h3>
    <p>Texto o contenido relacionado con la primera columna.</p>
  </div>
  <div class="columna2">
    <h3>Lanzadera B</h3>
    <p>Texto o contenido relacionado con la segunda columna.</p>
  </div>
</div>

Deja un comentario