Tutorial efecto en imagenes y efecto amigas 2 ♥

Gif encontrado en lovelysit
Editado por mi

Hola¡¡¡ Como estan? bien ?  ¡ Toy feliz que las nuevas autoras ya tan empesando a publicar sus entradas,muchas gracias por publicar ¡ Aora me toca a mi jijiji sabado y domingo publicar , uff he tenido  muchas tareas esta semana , bueno hoy les traigo un tutorial 
Primero les mostrare el efecto en las imagenes ,con este mismo efecto podemos usarlo para elite afiliados (Efecto amigas).

Vista Previa

En la primera imagen solita y grande pasa el cursor y veras el efecto ,ese es el efecto para las imagenes de tus entradas o puedes usarlo en otra cosa.

Si lo desean en su blog solo sige los pasitos :

Paso 1:Van a plantilla /Edicion de HTML/Expandir plantillas de artilugios

Y ponen Ctrl+F y ponen ]]></b:skin>

ponen atras de ]]></b:skin> el siguiente codigo
(para copiar el codigo ,selecciona todo el codigo y Presionas Ctrl+C y ya lo tienes copiado y lo pegas donde te indique )

.borzom { padding : 1px;border-right:4px solid #FFC0CA;border-bottom:4px solid #FFC0CA;border-left:4px solid #E4C0FF;border-top:4px solid #E4C0FF;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;border-radius:2px;-o-transition: all 1s ease;transition: all 1s ease; }
.borzom:hover {-webkit-transform: rotate(0deg) scale(1.383) skew(0deg) translate(0px);-moz-transform: rotate(0deg) scale(1.383) skew(0deg) translate(0px);-o-transform: rotate(0deg) scale(1.383) skew(0deg) translate(0px);}

#FFC0CA:Color del borde del lado derecho
#E4C0FF:Color del borde del lado izquierdo
4:Aumenta el numero si quieres que el borde sean mas gruesas 

Paso 2:.Luego pones guardar , y te vas a hacer una entrada y vas a HTML y colocas este codigo:

<img class="borzom" src="Url de tu imagen" /></a>

Cambias por la Url de tu imagen de entrada y te vas a redactar y veras tu imagen ,pones Vista previa y veras el efecto de la imagen.

Aora para efecto amigas siguen el Paso 1 y ponen guardar y siges el siguiente paso

Paso 3 :Ir a Diseño/Añadir un gadget/HTMLJavascript

y pegan el siguiente codigo

<a href="Url del blog de tu amiga" target="_blank"><img class="borzom" height="70" src="Url de la imagen" width="70" /></a><a href="Url del blog de tu amiga" target="_blank"><img class="borzom" height="70" src="Url de la imagen" width="70" /></a>
<a href="Url del blog de tu amiga" target="_blank"><img class="borzom" height="70" src="Url de la imagen" width="70" /></a><a href="Url del blog de tu amiga" target="_blank"><img class="borzom" height="70" src="Url de la imagen" width="70" /></a>

Si quieres mas solo sige copiando este codigo despues del codigo  </a> del paso 3 

<a href="Url del blog de tu amiga" target="_blank"><img class="borzom" height="70" src="Url de la imagen" width="70" /></a>

Para cambiar el tamaño
70:Es el tamaño de la imagen ,puedes cambiar a un numero menor para que sea un poco mas pequeña 
 y guardas.
Aora si quieres otro estilo con bordes redondos  buscas este codigo en el paso 1

border-radius:2px

Al encontrarlo el
2:Aumentas a 20 y se pondran redondos las esquinas de los bordes y si pones 50 se aran un circulo la imagen
Guardas y Bueno eso es todo 

Notita:

Si no encuentras b:skin , entonces en el paso 3 donde digo añadir un gadget y colocan el codigo ,colocan asi entonces el codigo :

<style>.borzom { padding : 1px;border-right:4px solid #FFC0CA;border-bottom:4px solid #FFC0CA;border-left:4px solid #E4C0FF;border-top:4px solid #E4C0FF;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;border-radius:2px;-o-transition: all 1s ease;transition: all 1s ease; }
.borzom:hover {-webkit-transform: rotate(0deg) scale(1.383) skew(0deg) translate(0px);-moz-transform: rotate(0deg) scale(1.383) skew(0deg) translate(0px);-o-transform: rotate(0deg) scale(1.383) skew(0deg) translate(0px);}
</style><a href="Url del blog de tu amiga" target="_blank"><img class="borzom" height="70" src="Url de la imagen" width="70" /></a><a href="Url del blog de tu amiga" target="_blank"><img class="borzom" height="70" src="Url de la imagen" width="70" /></a>
<a href="Url del blog de tu amiga" target="_blank"><img class="borzom" height="70" src="Url de la imagen" width="70" /></a><a href="Url del blog de tu amiga" target="_blank"><img class="borzom" height="70" src="Url de la imagen" width="70" /></a>

Si se dan cuenta esta el codigo que dije en el paso 1 pero esta dentro de <style>Aqui el codigo que se ponia antes de b:skin </style>  Es otra forma de añadir el codigo antes de b:skin