Quitar el borde de las imágenes

La mayoría de las plantillas de blogger tienen configuradas las imágenes para tener un borde alrededor. En algunas queda muy bonito, pero en otras plantillas, de acuerdo al diseño y al efecto que le querramos dar, no queda tan estético. Este es un ejemplo:

Por eso hoy les traigo un truco para poder quitar ese molesto borde negro o gris que se presenta alrededor de las imágenes que subimos, y que esta parezca confundirse con el fondo de tu blog.

1 - Vamos a Plantilla - HTML

2 - Apretamos Ctrl + F

3 - Buscamos post img {  

4 - Luego de este trozo de código encontrarás el color del borde y el tamaño en píxeles, que no lo coloco aquí porque varía en cada plantilla, por ejemplo, en algunas puedes encontrarlo como

border:1px solid $bordercolor; 

y en otras de esta manera: 

border: 1px solid #CCCCCC;

5 - Cambia donde dice 1 px por el valor de 0 px. Puedes encontrar un valor de border de 2 ó de 3 px variando de acuerdo a cada plantilla. Lo importante es que coloques 0.

6 - Si por el contrario, lo que quieres es engrosar el borde, solamente cambia el valor por uno mayor.

Fuente: Florwex

.

Caja contenedora de código html

Cuando tienes un blog de diseño se te hace necesario no sólo utilizar sino también publicar códigos para que tus lectores los utilicen.

Estos códigos (código html) cambian cuando los editas desde el formato de entrada REDACTAR, por ello debes ubicarlos en un lugar especial para que al ser publicados no cambien y puedan ser útiles.

Muchas de las ocasiones en las cuales los trucos no resultan es porque quien te los pasó  lo hizo sin tener en cuenta esto, y por ello el mismo contiene errores.

En esta oportunidad te traigo una caja para encerrar los códigos de tal manera que los puedas usar fácilmente.

REPITO: es muy importante encerrarlos en su caja.

1 - Ingresa a la sección de la plantilla  y busca ]]></b:skin>

2 - Arriba pega el siguiente código

/* Caja de código */


pre {

background:transparent url(<b><span style="color: #351c75;">aquí la url de una imagen</span></b>) no-repeat 0 0; /* Imagen Superior, si deseas cambiarla modifica lo que se encuentra dentro de url(AQUI) */

padding-top:22px; /* Relleno - para ajustar Fondo */

}

pre code {

overflow:auto; /* Determina si es necesario agregar barras de Scroll */

background-color:#E9E9E9; /* Color de Fondo en Hex */

border:1px solid #999999; /* Color de Borde en Hex */

color:#990000; /* Color de letra en Hex */

display:block; /* No tocar */

padding:8px; /* Relleno del cuadro */

white-space:pre; /* No tocar */

text-align:left; /* Alineacion del Texto , left=izquierda, center= centrado, right=derecha */su

min-height:63px; /* Altura minima del Cuadro */

}

/* Cuando pase el Mouse sobre la caja ocurrirá lo siguiente: */

code:hover {

background-color:#ffffff; /* Color de Fondo en Hex */

border:1px solid #666666;/* Color de Borde en Hex */le

}
/* FIN Caja de código */

3 - Donde dice Aquí la URL de la imagen colocas la dirección de la imagen que quieras poner arriba de la caja. Si no deseas hacerlo para que no se te haga complicado, borra la frase que está destacada.

4 - Puedes modificarla según los valores que desees, ten en cuenta las explicaciones dentro del código.

5 - Vista previa.

6 - Guardar plantilla si todo está bien.

7 - Puedes agregar la caja en todas las entradas llendo a Configuración - Entradas y comentarios - Plantilla de entrada  y agregar allí lo siguiente: 

<pre><code> aqui el codigo</code></pre> 

8 - Guarda los cambios.

9 - Si lo prefieres puedes agregarlo manualmente en cada una de las entradas en las cuales lo necesites.

Fuente: Gema Blog