COMO QUITAR, PONER O MODIFICAR EL MARCO Y LA SOMBRA EN UNA O VARIAS FOTOS DE BLOGGER

     No tengo ni idea de programación, y de informática lo básico, peeeero me pirra el DIY, pienso que lo que hace uno mismo sabe mejor, así que vestir mi blog corre de mi cuenta y de vez en cuando investigo cómo ponerle cosas chulas. Tengo una carpeta con un montón de hojas con códigos que voy remezclando unos con otros para ver que sale. Todas mis pruebas de "cocina bloggera" las hago en blogs de pruebas porque hay veces que lo relío tanto que tardo menos en borrar el blog y crear uno nuevo que en arreglar el desaguisado. 
    No es lo habitual, ¿eh? La mayor parte de las veces sale bien así que inauguro mi sección de "VISTE TU BLOG" donde encontrareis mis modestos tutoriales de diseño y personalización de blogs. Y para empezar uno facilito:

 


     Las imágenes de los blogs de blogger tienen por defecto una sombra y un marco alrededor que, aunque hay gente que lo considera antiestético, a mi me gusta. El problema llegó a la hora de añadir la firma mediante una imagen a las entradas del blog. 

    Yo quería que mi firma pareciera una firma y no una foto con texto así que, drástica yo, quité todas las sombras de todas las imágenes del blog, ea. 

 

    ¿Y esto cómo se hace? Pues así:

     Primero vamos a PERSONALIZAR PLANTILLA>>AVANZADO>>IMÁGENES

y ponemos el color de fondo y de borde transparente.  

    Después vamos a EDICIÓN HTML y con Ctrl+F abrimos el buscador y buscamos .post-body img, nos saldrá algo como esto:

.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); } 

 

    Empezamos con el marco, vamos hasta la línea donde dice:

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

     

    Aquí podemos aumentar los valores px (pixels) de border para aumentar el tamaño del marco o ponerlo a 0 para quitarlo. Y "solid" define el estilo del borde que puede ser:

SOLID

DOTTED

DOUBLE

DASHED

GROOVE

RIDGE

INSET

OUTSET

    Podemos hacer infinidad de combinaciones cambiando los valores de esta línea y los colores de fondo y de borde en PERSONALIZAR PLANTILLA>>AVANZADO>>IMÁGENES 

    O podemos añadir nuevas líneas de código como esta (cada valor corresponde a un borde) que hace que los bordes queden redondeados:

border-radius: 10px 10px 10px 10px ;

     

    O podemos escribir una línea de código para cada lado (superior, inferior, derecho, izquierdo) por separado donde #999999 corresponde al color expresado en forma hexadecimal:

border-top: 1px solid #999999 (image.border.color);
border-bottom: 1px solid #999999 (image.border.color);
border-right: 1px solid #999999 (image.border.color);
border-left: 1px solid #999999 (image.border.color);
   

     

 
    Vamos ahora con la sombra. Estas tres líneas son las que definen las características de la sombra, en realidad es sólo la tercera, las otras dos llevan los mismos valores y se añaden para que la sombra sea compatible con todos los navegadores. Para quitar la sombra ponemos todos los valores a 0.

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

    Si lo que queremos es modificarla jugamos con los valores seguidos de px: el rosa en positivo la coloca a la derecha y en negativo a la izquierda, el verde en positivo abajo y en negativo arriba y los números que asignemos indican el ancho. El azul nos marca el grado de difuminado (va de 0 transparente, a 1 opaco). ¿Y qué pasa si queremos sombra por los 4 lados de la imagen? Pues ponemos a 0 los dos primeros valores o podemos añadir un cuarto valor seguido de px.

    Y con los valores de rgba cambiamos el color y la intensidad, los tres primeros números marcan el color y el cuarto la intensidad, va de 0 (transparente) a 1 (opaco). Este es el código que corresponde a la siguiente imagen:

box-shadow: 0px 0px 15px 15px rgba(0, 0, 0, .5);

     Bien, ya sabemos cómo quitar y modificar la sombra ( y el marco) a las imágenes del blog, ¿pero qué pasa si lo que queremos es quitarla en algunas imágenes del blog y en otras no?
    Lo primero es seguir los pasos para quitar todas las sombras, después vamos a 
PERSONALIZAR PLANTILLA>>AVANZADO>>AÑADIR CCS y añadimos este código:

 

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

    Ahora sólo tendremos que añadir  id='sombraimg' en cada imagen a la que queramos añadir la sombra. Un ejemplo:

    Yo quiero poner sombra a la foto de mi entrada pero no a la imagen de la firma. Edito mi entrada y voy a HTML arriba a la izquierda, busco con Ctrl+F "img" para que me aparezcan resaltadas todas las imágenes de mi entrada y localizo la foto a la que quiero poner sombra. Añado id='sombraimg' de la siguiente manera:

<img id='sombraimg' border="0" src="URL DE MI FOTO" />

    Y este es el resultado:

    Con estos  conceptos básicos puedes modificar todas las fotos del blog, ya sea de las entradas, sidebar, títulos de pestañas en forma de imagen...  
¡Importante! Recuerda que antes de trastear es recomendable guardar una copia de la plantilla.