Cómo alinear imágenes en Blogger

Cada vez que intentamos alinear imágenes en Blogger horizontalmente en nuestras publicaciones , enfrentamos algunos problemas porque no conseguimos colocar las imágenes de forma horizontal. En este minitutorial les mostraremos como alinear las imágenes de forma sencilla.

Si tienes conocimientos básicos de HTML entonces podrás solucionar este inconveniente de forma sencilla, pero si recién inicias en el mundo del blogging, no te preocupes, porque a continuación te explicó detalle a detalle cómo puedes alinear fácilmente las imágenes en tus publicaciones en blogger.

Índice
  1. ¿Cómo alinear imágenes en Blogger?
  2. Solución para alinear imágenes en Blogger
  3. Personalización
  4. Consejos para personalizar el código html

¿Cómo alinear imágenes en Blogger?

En primer lugar le mostramos un ejemplo que le ayudara a entender como alinear imágenes en Blogger de forma sencilla. En estas divertidas imágenes podrán ver a perros y gatos juntos. Sin embargo las imagenes no se encuentran alineadas. Entonces ¿Cómo puedo alinear imágenes en Blogger de forma sencilla?

Primero subiremos las tres imágenes en nuestra publicación en blogger y luego cambiaremos su posición mediante la edición de sus propiedades. Alineáremos el primero a la izquierda, el segundo en el centro y el tercero al lado derecho.

A continuación mostramos el código generado al subir imágenes en la plataforma blogger.

<div class="separator" style="clear: both; text-align: center;">
<a href="https://tecneofito.com/wp-content/uploads/2021/05/perros-y-gatos.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://tecneofito.com/wp-content/uploads/2021/05/perros-y-gatos.jpg" height="320" width="93" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://tecneofito.com/wp-content/uploads/2021/05/perros-y-gatos.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://tecneofito.com/wp-content/uploads/2021/05/perros-y-gatos.jpg" height="320" width="93" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://tecneofito.com/wp-content/uploads/2021/05/perros-y-gatos.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://tecneofito.com/wp-content/uploads/2021/05/perros-y-gatos.jpg" height="320" width="93" /></a></div>

Se puede ver en la codificación anterior que blogger ha añadido etiquetas con propiedades de estilo automáticamente y en consecuencia cada imagen está rodeada por etiquetas de <div> y </ div>. Estas etiquetas se encuentran trabajando individualmente en cada imagen y evitan su alineación.

Solución para alinear imágenes en Blogger

La solución es muy sencilla, simplemente tenemos que eliminar algunas etiquetas: <div class="separator" style="clear: both; text-align: center;"> y </div> que se han insertado de forma automática en las imágenes por lo que necesitaremos eliminarlos dejando la primera y la última etiqueta. EL código modificado se muestra a continuación.

<div class="separator" style="clear: both; text-align: center;">
<a href="https://tecneofito.com/wp-content/uploads/2021/05/perros-y-gatos.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://tecneofito.com/wp-content/uploads/2021/05/perros-y-gatos.jpg" height="320" width="93" /></a>
<a href="https://tecneofito.com/wp-content/uploads/2021/05/perros-y-gatos.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://tecneofito.com/wp-content/uploads/2021/05/perros-y-gatos.jpg" height="320" width="93" /></a>
<a href="https://tecneofito.com/wp-content/uploads/2021/05/perros-y-gatos.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://tecneofito.com/wp-content/uploads/2021/05/perros-y-gatos.jpg" height="320" width="93" /></a></div>
 

Personalización

Si crees que las imágenes se encuentran muy separadas, puedes modificar el código para mejorar la alineación.

Dirígete a la sección HTML y modifica el estilo que se encuentra dentro de la etiqueta <a> de la primera imagen.

Buscar:

 style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;

Reemplazar por:

style="clear: left; float: center; margin-bottom: 1em;

En la segunda imagen dentro de la etiqueta <a> de la segunda imagen:

Buscar:

 style="margin-left: 1em; margin-right: 1em;

Reemplazar por:

style="float: center; margin-right: 1em; margin-right: 1em; 

Realizaremos el mismo procedimiento para la tercera imagen:

Buscar:

style="margin-left: 1em; margin-right: 1em;

Reemplazar por:

style = "clear: right; float: centro ; margin-bottom: 1em; 

Después de realizar los cambios los resultados se muestran a continuación.
`

 

Consejos para personalizar el código html

Como alinear imágenes en Blogger sin morir en el intento

Si no le gusta el tamaño de la imagen, haga clic en la imagen para seleccionarla, haga clic en el botón "HTML" y actualice la altura y el ancho en el editor HTML. También tiene la opción de agregar una nueva imagen a su publicación pegando el siguiente código en el editor:

Para cambiar de imágenes reemplace el enlace de la imagen de Tecneofito y modifique los valores de alto y ancho en píxeles. Al cambiar el tamaño de las imágenes mediante HTML, recuerde que la calidad de la imagen se degrada a medida que aumenta el tamaño de la imagen.

Jhon Torres

Mi nombre es Jhonatan. Soy un poco adicto a las aplicaciones y tendencias en los medios sociales, soy un entusiasta del cómic, las series de ficción y sobre todo de la tecnología. Llevo escribiendo por más de 8 años en Tecneófito de manera profesional.

Entradas relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *