Blogger - Cómo crear una Galería de Imágenes Responsive

Galería de imágenes adaptado a cualquier dispositivo

crear una galería en blogger


En esta guía de blogger les comparto como agregar una galería de imágenes y que esta se logre adaptar desde cualquier dispositivo que sea visto.

Normalmente Blogger nos permite agregar imágenes simultáneamente, sin embargo, estas no quedan organizadas en ningún dispositivo. Por ello, les dejo el truco para agregar varias imágenes en blogger y quede de forma responsive para un mejor diseño del blog.

Código CSS

Lo primero necesitamos el código CSS para conseguir una galería de imágenes adaptable a cualquier dispositivo. Copia el siguiente código y sigue las instrucciones:

div.gallery {

  border: 1px solid #ccc;

}

div.gallery:hover {

  border: 1px solid #777;

}

div.gallery img {

  width: 100%;

  height: auto;

}

* {

  box-sizing: border-box;

}

.responsive {

  padding: 0 6px;

  float: left;

  width: 24.99999%;

}

@media only screen and (max-width: 700px) {

  .responsive {

    width: 49.99999%;

    margin: 6px 0;

  }

}

@media only screen and (max-width: 500px) {

  .responsive {

    width: 50%;

  }

}

.clearfix:after {

  content: "";

  display: table;

  clear: both;

}


Te Recomiendo estas Entradas

Insertar CCS dentro del código de la plantilla de Blogger

Necesitamos agregar el CSS en la plantilla que estemos usando de blogger, que dará forma a la galería de imágenes. Para poner a funcionar pega el siguiente Código CSS y sigue los pasos:

  1. Dirígete a la parte de -> Tema
  2. Luego en Personalizar, se desplegara un menú
  3. Le das click en Editar HTML
  4. Entonces, Presionas con tu teclado CTRL + F -- se abrirá un pequeño cuadro Search:
  5. Escribes ]]></b:skin> das ENTER para encontrar dirigirte a la sección -- pega el código CSS antes de ]]>
  6. Le das Guardar a la plantilla

insertar CSS en plantilla blogger

pegar CSS de galería en plantilla blogger

Ahora, copia en el cuerpo del blog la función que llamara el código CSS, dirígete a Vista en HTML

de ahí, coloca lo siguiente y reemplaza la dirección de las imágenes y si quieres añadir un enlace a la imagen.

<div class="responsive">

  <div class="gallery">

    <a target="_blank" href="dirección-donde-se-abrira-un-enlace-externo-o-interno.html">

      <img src="imagen.jpg" alt=" " width="600" height="400">

    </a>

  </div>

</div>


<div class="responsive">

  <div class="gallery">

    <a target="_blank" href="dirección-donde-se-abrira-un-enlace-externo-o-interno.html">

      <img src="imagen.jpg" alt=" " width="600" height="400">

    </a>

  </div>

</div>


<div class="responsive">

  <div class="gallery">

    <a target="_blank" href="dirección-donde-se-abrira-un-enlace-externo-o-interno.html">

      <img src="imagen.jpg" alt=" " width="600" height="400">

    </a>

  </div>

</div>


<div class="responsive">

  <div class="gallery">

    <a target="_blank" href="dirección-donde-se-abrira-un-enlace-externo-o-interno.html">

      <img src="imagen.jpg" alt=" " width="600" height="400">

    </a>

  </div>

</div>

<div class="clearfix"></div>


Galería Adaptada a Blogger

Cuando hayas seguido las instrucciones, entonces, la galería de imágenes debe verse así:

Galería responsive adaptado a blogger

Esta información fue sacada de la Web W3Schools

Se aplico esta galería para adaptarlo en blogger. Procura que el tamaño de las imágenes sean la misma para que se vea organizado.

Publicar un comentario

Déjame un mensaje.

Artículo Anterior Artículo Siguiente

نموذج الاتصال