Ponerle marco de colores a imágenes en Blogger

Ponerle marco de colores a imágenes en Blogger

Este efecto es muy interesante y decorativo para las imágenes que exhibimos en nuestro sitio o blog. Consiste en que al posar el puntero del Mouse aparece un marco de color alrededor de esta.

Para instalarlo, comenzaremos yéndonos  a Editar HTML: 

 

Ya estando en la plantilla, ubicamos esto:

]]></b:skin>

En la parte de arriba de; ]]></b:skin> pegamos este código: 

.img-tm{

    background-color:#FFF;

    border:1px solid #CCC;

    padding:4px; line-height:0;

    cursor:pointer;

    -webkit-transition:all 300ms ease-in-out;

    -moz-transition:all 300ms ease-in-out;

    -o-transition:all 300ms ease-in-out;

    -moz-box-shadow:0 1px 0 #FFF inset;

    -webkit-box-shadow:0 1px 0 #FFF inset;

    box-shadow:0 1px 0 #FFF inset

}

.img-tm:hover{

    background:#44a5e8;

    background:-webkit-gradient(linear,left bottom,left top,from(#1d84e4),to(#70c8f3)) #44a5e8;

    -moz-box-shadow:0 1px 10px rgba(0,0,0,0.29),0 1px 4px rgba(23,148,232,0.81),inset 0 1px 0 #bbecf3;

    border:1px solid #177bc0;

    border-bottom-color:#0f4d78; 

    -webkit-box-shadow:0 1px 10px rgba(0,0,0,0.29),0 1px 4px rgba(23,148,232,0.81),inset 0 1px 0 #bbecf3;

    box-shadow:0 1px 10px rgba(0,0,0,0.29),0 1px 4px rgba(23,148,232,0.81),inset 0 1px 0 #bbecf3;

}       

 Debe quedar de esta forma:

Damos clic en Guardar Plantilla: 

Pero aun nuestra imágen no presenta el efecto que buscamos.  

Nos vamos al Editor de Entradas y pulsamos en HTML:  

Ubicamos la imagen a la cual le aplicaremos el efecto:

Ahora pegaremos esto:

class="img-tm"

Enseguida de: <img

Debe quedar así:   

Este proceso se realiza con cada una de las imágenes (una por una a la vez) que queramos ponerle este efecto.

El resultado: 

El borde está en color Azul y delgado, pero lo podemos modificar al igual que el grosor, manipulando el CSS que pegamos antes en estilos de la plantilla.

Para hacer eso, localizar lo siguiente:

Para cambiar el grosor del marco, cambiar los pixeles en donde está en color Azul y para ponerle otro color al mismo, cambiar el código que está en color Rojo: 

 

Los códigos se consiguen yendo a esta página: http://html-color-codes.info/codigos-de-colores-hexadecimales/

Eso es todo. Por favor déjenos su comentario. Visítenos y suscríbase en nuestro canal de YouTube.

/ Publicado por: millennium2013 / De su autoría y  fuentes Web / Para TaringaMás / Año 1 / 2013                                 

Compartir