Como poner imágenes con o sin bordes en Blogger

En el css de las plantillas de Blogger las imágenes que añadimos en nuestras entradas vienen con el atributo "border" añadido por defecto, así cada vez que subimos una imagen esta se muestra en el blog con borde, ya expliqué en un post anterior como "quitar el borde a las imágenes"

Suele suceder que eliminamos el borde, pero en alguna ocasión nos resulta más apropiado o simplemente nos apetece mostrar una imagen determinada en un post con borde.
La solución está añadiendo en el CSS un código con los atributos para las imágenes que queremos "bordear":

.post .img2 {
margin:0 0 5px 0;
padding:4px;
border:1px solid #C0C0C0;
}

Ahora cuando subimos una imagen al editor de entradas, hemos de añadirle el atributo class="img2" si queremos que tenga borde.
Así se muestra el código de una imagen en "edición de HTML" en nuestro editor de entradas una vez subida al blog:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/RoWk5JdlFyI/AAAAAAAABu4/QmpN87bWS9E/s1600-h/bannergcara.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/RoWk5JdlFyI/AAAAAAAABu4/QmpN87bWS9E/s200/bannergcara.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5081649056256956194" /></a>

Esta imagen se vería sin borde, pero al añadirle el atributo class="img2" (lo he puesto en negrita) se mostrará bordeada:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/RoWk5JdlFyI/AAAAAAAABu4/QmpN87bWS9E/s1600-h/bannergcara.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/RoWk5JdlFyI/AAAAAAAABu4/QmpN87bWS9E/s200/bannergcara.JPG" class="img2" border="0" alt=""id="BLOGGER_PHOTO_ID_5081649056256956194" /></a>

Por supuesto, también puede hacerse al revés, es decir, sino has modificado el CSS de las imágenes, puedes añadir el código igualmente para que las imágenes que quieras se vean sin borde, solo has de cambiar el "border" a cero pixeles:

.post .img2 {
margin:0 0 5px 0;
padding:4px;
border:0px solid #C0C0C0;
}

Podríamos pegar el class="img2" en Plantilla - Opciones - Formato - Plantilla de entrada, así aparecería automaticamente en nuestro editor de entradas cada vez que editamos un nuevo post, si queremos usarlo solo hay que copiarlo y colocarlo en el código de la imagen una vez subida y, si no vamos a usarlo, lo borramos y listo.




Compartir Enlace