Cómo personalizar las fotos en Blogger

Seguimos con tutoriales para Blogger que, junto a imprimibles y clip arts, son de las cosas que más me pedís por email. Esta vez, las protagonistas serán las fotos de nuestras entradas. Vamos a ver cómo personalizarlas de una manera muy sencilla, para que aparezcan todas con el mismo efecto de manera automática en nuestras entadas del blog.

Necesitas tener al menos una entrada con una foto publicada, para poder ver los diferentes efectos con los que vamos a practicar usando la Vista Previa ¿de acuerdo? Recuerda que lo más recomendable es que primero hagas estos tutoriales en un blog de pruebas y cuando veas que el resultado es el que quieres, los pases a tu blog original. Así nos ahorramos sustos si algo sale mal.

Quitar la sombra que aparece bordeando la imagen

Empezamos con lo más básico, eliminar ese sombreado tan feo que aparece alrededor de nuestras imágenes por defecto cuando instalamos la plantilla simple/sencilla de Blogger.

1.- Entramos en nuestra plantilla HTML:

Plantilla >> Editar HTML


2.- Pinchamos en cualquier zona dentro del cuadro de código y pulsamos a la vez Control + F para abrir el buscador interno de Blogger.

3.- Buscamos: .post-body img,

4.- Podemos encontrar más de uno, el que nos interesa es este:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: $(image.border.small.size);

  background: $(image.background.color);
  border: 1px solid $(image.border.color);

  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}




5.- Bajamos hasta el final del código:

  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

Este es el efecto de sombreado, vamos a eliminarlo en un segundito.

6.- Solo tienes que cambiar los 1 entre paréntesis por 0. Así:

  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0);

El código completo resultante sería:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: $(image.border.small.size);

  background: $(image.background.color);
  border: 1px solid $(image.border.color);

  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0);
}


7.- Ahora pincha en Vista Previa antes de guardar los cambios y si lo has hecho bien, verás que la sombra ha desaparecido:

¡Ya hemos eliminado la sombra! Ha sido sencillo ¿verdad? Pero todavía nos aparece ese marquito blanco... ¿vemos cómo quitarlo?

Eliminar el marco que bordea las imágenes en Blogger

8.- Seguiremos trabajando con el mismo fragmento de código que ahora estará así:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: $(image.border.small.size);

  background: $(image.background.color);
  border: 1px solid $(image.border.color);

  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0);
}


La parte que nos interesa es la que te he marcado en negrita.


9.- Cambiamos 1px por 0px:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: $(image.border.small.size);

  background: $(image.background.color);
  border: 0px solid $(image.border.color);

  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0);
}


10.- Pinchamos en Vista Previa:

¡Marco eliminado! Nuestra imagen ya está completamente integrada en nuestro post. Mucho mejor ¿verdad?

Pero ¿y si queremos mantener el sombreado o el marco pero variando el color? ¡También podemos hacerlo! Vamos a verlo con un ejemplo.

Añadir marcos y sombras a las imágenes de Blogger

11.- Vamos a ver primero el tema del sombreado, seguimos con el mismo fragmento de código:


.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: $(image.border.small.size);

  background: $(image.background.color);
  border: 0px solid $(image.border.color);

  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0);
}


Vamos a trabajar con el trozo que te he marcado en negrita.


12.- Elegimos un color. Puedes conseguir el código HTML de un montón de colores en esta web:

Colores HTML


13.- Una vez tengas tu color, hacemos el siguiente cambio:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: $(image.border.small.size);

  background: $(image.background.color);
  border: 0px solid $(image.border.color);

  -moz-box-shadow: 1px 1px 5px #81DAF5;
  -webkit-box-shadow: 1px 1px 5px #81DAF5;
  box-shadow: 1px 1px 5px #81DAF5;
}

Solo hemos cambiado rgba(0, 0, 0, 0) por el código HTML del color que hemos elegido.


14.- Pinchamos en Vista Previa:

Ahora nuestra sombra es de color azul (o del color que hayas elegido). Y, si te fijas, no es igual en cada borde. Si quieres cambiar el grosor, solo tienes que jugar con los valores de los px.

Por ejemplo:

  -moz-box-shadow: 5px 5px 5px #81DAF5;
  -webkit-box-shadow: 5px 5px 5px #81DAF5;
  box-shadow: 5px 5px 5px #81DAF5;

Resultado:

O:

  -moz-box-shadow: 0px 0px 2px #81DAF5;
  -webkit-box-shadow: 0px 0px 2px #81DAF5;
  box-shadow: 0px 0px 2px #81DAF5;
}


Resultado:

Todo depende de la idea que tengas en mente. Dedica unos minutos a jugar con los valores de los px, ¡puede ser divertido! Y te ayudará a perder el miedo a toquetear tu código.


15.- Ahora vamos a jugar con el marco, trabajaremos con el mismo fragmento de código:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: $(image.border.small.size);

  background: $(image.background.color);
  border: 0px solid $(image.border.color);

  -moz-box-shadow: 1px 1px 5px #81DAF5;
  -webkit-box-shadow: 1px 1px 5px #81DAF5;
  box-shadow: 1px 1px 5px #81DAF5;
}

Pero esta vez, el trozo que nos interesa es el que te he marcado en negrita. Es el color de fondo de nuestra imagen.


16.- Elige tu color y aplica el siguiente cambio:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: 2px;

  background: #81DAF5;
  border: 0px solid $(image.border.color);

  -moz-box-shadow: 0px 1px 5px #81DAF5;
  -webkit-box-shadow: 0px 1px 4px #81DAF5;
  box-shadow: 0px 1px 4px #81DAF5;
}

Como ves, solo he cambiado la variable  $(image.background.color); por mi código de color #81DAF5; y el resultado al pinchar en Vista Previa es:

17.- Una vez tengas el marco del color que quieras, puedes cambiar o eliminar la sombra:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: 2px;

  background: #81DAF5;
  border: 0px solid $(image.border.color);

  -moz-box-shadow: 1px 1px 10px #81F79F;
  -webkit-box-shadow: 1px 1px 10px #81F79F;
  box-shadow: 1px 1px 10px #81F79F;
}

Así quedaría con el marco azul y una sombra verde:

Redondear los bordes de las fotos en Blogger

18.- Y, como último detalle, podemos programar nuestras fotos para que aparezcan con los bordes redondeados por defecto. Solo tenemos que añadir una línea de código al fragmento con el que estamos trabajando, así:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: 2px;

  background: #81DAF5;
  border: 0px solid $(image.border.color);
  border-radius: 20px;

  -moz-box-shadow: 1px 1px 10px #81F79F;
  -webkit-box-shadow: 1px 1px 10px #81F79F;
  box-shadow: 1px 1px 10px #81F79F;
}

Resultado:

Puedes variar el número de px del código para redondear más o menos los bordes de tus imágenes.

Si te has fijado, este código afecta también a las imágenes de la sidebar:

Si quieres que las imágenes de tu sidebar no se vean afectadas, hay una forma un poco más complicada de hacerlo, pero se puede.

Mantener intactas las imágenes de la sidebar de blogger

19.- Para ello vamos a separar una parte de nuestro código, exactamente el que afecta a nuestras imágenes de la barra lateral:


.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: 2px;

  background: #81DAF5;
  border: 0px solid $(image.border.color);
  border-radius: 20px;

  -moz-box-shadow: 1px 1px 10px #81F79F;
  -webkit-box-shadow: 1px 1px 10px #81F79F;
  box-shadow: 1px 1px 10px #81F79F;
}


El que te he marcado en negrita.


20.- Lo borraremos y lo pegaremos debajo, tiene que quedarte así:

.post-body img, .post-body .tr-caption-container { 
  padding: 2px;

  background: #81DAF5;
  border: 0px solid $(image.border.color);
  border-radius: 20px;

  -moz-box-shadow: 1px 1px 10px #81F79F;
  -webkit-box-shadow: 1px 1px 10px #81F79F;
  box-shadow: 1px 1px 10px #81F79F;
}

.Profile img, .Image img,
.BlogList .item-thumbnail img {
}

Es muy importante que añadas las llaves { } a tu nuevo fragmento de código, ya que entre ellas vamos a añadir el formato que queremos para las imágenes de nuestra barra lateral.

21.- Una vez hecho esto, copiamos el código que hay entre { } con el que hemos trabajado durante todo el tutorial y lo pegamos entre las { } de nuestro nuevo fragmento de código, así:

.post-body img, .post-body .tr-caption-container {
  padding: 2px;

  background: #81DAF5;
  border: 0px solid $(image.border.color);
  border-radius: 20px;

  -moz-box-shadow: 1px 1px 10px #81F79F;
  -webkit-box-shadow: 1px 1px 10px #81F79F;
  box-shadow: 1px 1px 10px #81F79F;
}

.Profile img, .Image img,
.BlogList .item-thumbnail img {

padding: 2px;

  background: #ffffff;
  border: 0px solid $(image.border.color);


  -moz-box-shadow: 0px 0px 0px #81F79F;
  -webkit-box-shadow: 0px 0px 0px #81F79F;
  box-shadow: 0px 0px 0px #81F79F;

}

Le aplicamos los cambios que queramos en cuanto a fondo, marcos,sombras y redondeos. Si copias mi código tal cual, el resultado será:

Como ves, la foto de la sidebar ahora es diferente a la de las entradas, no tiene marcos ni bordes. Los cambios que apliquemos a las fotos de nuestras entradas ya no le afectan.


21.- Y como somos muy ordenaditas vamos a llevarnos este nuevo código a la zona donde aparecen los códigos referentes a nuestra sidebar, para tener una plantilla limpia y ordenada.

Copia esta parte nueva de tu código:

.Profile img, .Image img,
.BlogList .item-thumbnail img {

padding: 2px;

  background: #ffffff;
  border: 0px solid $(image.border.color);


  -moz-box-shadow: 0px 0px 0px #81F79F;
  -webkit-box-shadow: 0px 0px 0px #81F79F;
  box-shadow: 0px 0px 0px #81F79F;

}


22.- Busca (Control + F) en tu plantilla:

/* Widgets
----------------------------------------------- */



23.- Y pega tu código debajo del que ya encontrarás. Así:

/* Widgets
----------------------------------------------- */
.widget .zippy {
  color: $(widget.alternate.text.color);
  text-shadow: 2px 2px 1px rgba(0, 0, 0, .1);
}

.widget .popular-posts ul {
  list-style: none;
}


.Profile img, .Image img,
.BlogList .item-thumbnail img {

padding: 2px;

  background: #ffffff;
  border: 0px solid $(image.border.color);


  -moz-box-shadow: 0px 0px 0px #81F79F;
  -webkit-box-shadow: 0px 0px 0px #81F79F;
  box-shadow: 0px 0px 0px #81F79F;

}


24.- Comprueba en Vista Previa que no hay ningún error, guarda los cambios... ¡Y listo! Todas las fotos que subas a tus entradas aparecerán con el formato que hayas elegido por defecto y no tendrás que volver a preocuparte de sombras, marcos y demás.

¿Qué te ha parecido? ¡Si te animas a hacerlo, déjame el enlace a tu blog en comentarios! 

Me encantaría ver el resultado en tu blog. 

Y recuerda compartir esta entrada en tus redes sociales si te ha parecido interesante... 

¡me ayudas un montón a seguir adelante!

---

Suscríbete a mis entradas por email ¡para no perderte nada!





♥ Las recibirás en tu bandeja de entrada el mismo día que sean publicadas ♥