Como Añadir Automaticamente Borde a las Imagenes en Blogger

Hola!El super Truco para Manipular de las imagenes con Css resulta interesante podemos añadir atributos a los elemntos de la pagina y crear otros como por ejemplo el añadir un borde o bordes a las imagenes. Ademas el efecto de cambiar de color de borde al pasar el mouse sobre la imagen.

Te mostrare como hacerlo automaticamente para que asi no tengas que añadirlo manualmente cada vez que subas una imagen.Son sencillos pasos que no tomara nada de tu tiempo.Añadir bordes del ancho que desees le da ese toque especial y llamativo a las fotos particulares que deseas resaltar en la pagina o blog de blogger.Solo siguie los siguientes pasos.

Ejemplo Imagenes con borde:

1.Entra a la Interface de Blogger--> Diseño- -> Editar HTML
2.Busca la siguiente etiqueta </head>
3.Copie y pegue el codigo de abajo justo antes de la siguiente etiqueta </head> .

<style type='text/css'>
 
#outer-borders a img, #outer-borders a  { border: none; float: left; }
#outer-borders a { margin: 3px; }
#outer-borders a:hover { outline: 3px solid #0000ff; }
 
</style>

Nota:Puedes cambiar el color del borde ,tamano,margen,... pero ambos el tamano y el margen adeben tener el mismo valor numerico.
4.Ahora añade tus imagenes como muestra aqui abajo

<div id="outer-borders">
   
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdOjCmHrHGumnGANzVqXj9CTcdLTkRhCvxA5DyY_DghmF62teVLDAVAdV4vKwUKNLcp4FkVZyJ6ht9KRUBXAPC5CExMqx73epnjQyyRc37FyLiLciRQjhjDwSC6CyuaoviW9amUVsEhgYm/+1+small.jpg" alt="#" /></a>
   
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlbejaphyphenhyphenwmoztaJHL14xGIKAl9-au9IMfcxXiiV4OFPXsHTMJTfk3p_a7MqI8aU-8nhgnTspiNgsjHb79Mf48uDBUTYJhoCBugoWqx8QY-QFMhuYwTOfYeShwq77tJPTXkU-tYzZcNvzF/+2+small.jpg" alt="#" /></a>
   
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW0ono20QpUQDwWGBloFvIbymB0rJyJiwzFWFeUBeEKyypctXNPX43zcUpzI7puSAJV-mtZ92qo3TR9InDdQpa3jZzyLUCscooM-Uco14q2wcl72ZgNSNjso7aia8EEMKeOMWA4t_N37Hn/+3+small.jpg" alt="#" /></a>     
  
</div>

y Listo.

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati