Personalizar el tamaño de las imágenes en los gadgets de Blogger mediante un pequeño código

Si tienes un blog en Blogger y utilizas gadgets como “Entradas populares”, “Archivo”, “Etiquetas” o widgets personalizados con imágenes, seguramente habrás notado que muchas veces las miniaturas aparecen demasiado grandes, pequeñas o desproporcionadas.

La buena noticia es que puedes modificar fácilmente el tamaño de esas imágenes añadiendo unas pocas líneas de código CSS en tu plantilla.

¿Por qué personalizar el tamaño de las imágenes?

Ajustar correctamente las miniaturas de los gadgets puede ayudarte a:

• Mejorar el diseño visual del blog.
• Conseguir una apariencia más profesional.
• Hacer que la barra lateral cargue más rápido.
• Mantener una estructura uniforme en todos los widgets.
• Adaptar mejor el blog a dispositivos móviles.

Cómo cambiar el tamaño de las imágenes en los gadgets de Blogger

Paso 1: Accede al panel de Blogger

Entra en tu cuenta de Blogger y selecciona el blog que deseas modificar.

Después ve a:

Tema → Personalizar → Editar HTML

Paso 2: Busca la etiqueta ]]></b:skin>

Dentro del editor HTML utiliza:

• Ctrl + F en Windows
• Cmd + F en Mac

y busca:

]]></b:skin>

Justo encima de esa línea añade el siguiente código CSS:

.sidebar img,
.PopularPosts img,
.Image img {
    width: 120px;
    height: auto;
    border-radius: 8px;
}

¿Qué hace este código?

• width: 120px;
  Define el ancho de las imágenes.
• height: auto;
  Mantiene la proporción original para evitar deformaciones.
• border-radius: 8px;
  Añade bordes redondeados para un diseño más moderno.

Personalización adicional

Puedes modificar el valor del ancho según el diseño de tu blog:

Tamaño	Código
Pequeño	width: 80px;
Mediano	width: 120px;
Grande	width: 180px;

Si quieres que las imágenes sean cuadradas, puedes usar:

.sidebar img,
.PopularPosts img {
    width: 120px;
    height: 120px;
    object-fit: cover;
}

Consejo importante

Antes de realizar cualquier cambio en la plantilla, es recomendable hacer una copia de seguridad del tema actual desde:

Tema → Copia de seguridad → Descargar tema

Así podrás restaurarlo fácilmente si algo no sale como esperabas.

Resultado final

Con este pequeño truco podrás controlar mejor el aspecto visual de los gadgets de tu blog y darle un toque mucho más limpio y profesional sin necesidad de instalar plantillas complicadas ni editar grandes bloques de código.

Pequeños cambios como este pueden marcar una gran diferencia en la experiencia visual de tus lectores.