Regresee¡+Tutorial Efecto Imagen 7+Efecto amigas 5


Hola¡ Como están? por fin regrese a Ilo,me quede de mas días,por que mis padres me abandonaron en moquegua, allí no había Internet y asía un sol uff ,casi muero odio el sol de moquegua, ya me quería venir estañaba el blog y a ustedes  Por fin en casa ,fue aburrido un poco halla en la casa de mis abuelitos, pero cuando fui donde mi tía Diana,me la pase muy bien,miramos puras películas   No estuvo tan mal ,ademas servian arta comida 
Bueno y al fin estoy aquí ¡ Me estrañaron? 
Quería avisarles que me are otro blog ,pero que sera mi diario de todo lo que me pase escribiré y si es que puedo publicar historias creadas por mi   Si es que me alcanza tiempo .
Terminando todo lo que queria decir les dejo un tutorial de efecto en imagen .
 aquí les dejo una muestra como queda:

Bueno hay tres maneras de ponerlas,depende de ti ,cual quieres aquí están,espero que no se confundan,lo hice las tres maneras en una entrada,si no lo quieren asi todo junto por que se confunden ,me avisan para que la siguiente ves lo aga separado ok?.Cuando digo LISTO es alli donde termina sus pasos de las maneras de los efectos   :


PARA LAS IMAGENES QUE DESEES QUE TENGA ESTE EFECTO:
PASO 1
Para Plantilla Basica o Blogger: Ir a Plantilla/Edicion Html/Buscar con Ctrl +F  ]]></b:skin>
Para Plantilla Clasica o Blogskin:Pegar el siguiente codigo antes de </style>
(para copiar el codigo ,selecciona todo el codigo y Presionas Ctrl+C y ya lo tienes copiado y lo pegas donde te indique )
.efec7{border: 2px #C8C6C6 solid;border-radius:50px;}
.efec7:hover{-webkit-filter: grayscale(0.7); -webkit-transform: rotateY(-180deg);-moz-transition-duration:1s; -webkit-transition-duration:1s; -o-transition-duration:1s;}
2:Tamaño del borde de la imagen
#C8C6C6:Color del borde
solid:Puedes cambiarlo a "dashed" o "dotted" para mas CLIC AQUI para que veas los tipos de bordes
50:es el tamaño de los bordes redondeados, disminuye si no lo quieres tan redondo los bordes
En caso que no quieras los bordes redondeados y quieres que quede cuadrado ,solo borras este codigo:
border-radius:50px;

PASO 2
Luego si la quieres colocar una imagen con este efecto a tu entrada (te vas a Html) o a uno de tus gadgets (te vas a añadir un nuevo gadget/htmlJavascript) solo copia el siguiente codigo:
<img class="efec7" src="Url de tu Imagen" width="240" />
240:es el ancho de la imagen,disminuye el numero si es muy ancho.
y LISTO
PARA TODAS LAS IMAGENES 
Para Plantilla Basica o Blogger: Ir a Plantilla/Edicion Html/Buscar con Ctrl +F  ]]></b:skin>
Para Plantilla Clasica o Blogskin:Pegar el siguiente codigo antes de </style>
img{border: 2px #C8C6C6 solid;border-radius:50px;}
img:hover{-webkit-filter: grayscale(0.7); -webkit-transform: rotateY(-180deg);-moz-transition-duration:1s; -webkit-transition-duration:1s; -o-transition-duration:1s;}
LISTO,todas las imagenes tendran este efecto 
PARA EFECTO AMIGAS 5
Hacen los mismo del primer PASO 1 de "PARA LAS IMAGENES QUE DESEES QUE TENGA ESTE EFECTO" despues siges el siguiente paso
PASO 2 
Para Plantilla Basica o Blogger: Ir a Diseño/Añadir un gadget/HTMLJavascript
Para Plantilla Clasica o Blogskin: En el lugar que deseen poner este efecto amigas
<a href="Url del blog de tu amiga" target="_blank"><img class="efec7" height="70" src="Url de la imagen" width="70" /></a><a href="Url del blog de tu amiga" target="_blank"><img class="efec7" height="70" src="Url de la imagen" width="70" /></a><a href="Url del blog de tu amiga" target="_blank"><img class="efec7" height="70" src="Url de la imagen" width="70" /></a><a href="Url del blog de tu amiga" target="_blank"><img class="efec7" height="70" src="Url de la imagen" width="70" /></a>

Si quieres mas solo sige copiando este codigo despues del codigo  </a> del PASO 2 
<a href="Url del blog de tu amiga" target="_blank"><img class="efec7" 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,LISTO eso es todo 

13 comentarios :

  1. que bueno que regresaste y gracias por tantos efectos :)

    ResponderEliminar
  2. Que bueno que hayas regresado :D Hermoso efecto n-n gracias!

    ResponderEliminar
  3. bienvenida de vuelta y muchas gracias por el tutorial ^^

    ResponderEliminar
  4. Hola Lunaly! Oye quisiera proponer una entrada ! Me gustaría saber como poner la cabecera en trasparente, no se si me explico...Para que no salga el fondo blanco de la cabecera y podamos poner renders para que no se vea el fondo blanco feo Te agradecería mucho que hicieras una entrada sobre eso! O si ya la tienes envíame el link pofis ! Besos

    ResponderEliminar
  5. Me encanta el efecto amiga!!! muchas gracias lo usare para mi siguiente cambio de look, un saludo nena

    ResponderEliminar
  6. Muy lindo el efecto! Porcierto, te he nominado en mi blog, por si quieres pasarte a verlo. myweirdopineapple.blogspot.com

    ResponderEliminar
  7. wow yo tambien hace poco que vine de vacaciones ahora estoy comentando en todas las entradas que no coemnte de los blogs XD

    ResponderEliminar
    Respuestas
    1. *m* Hola kumy , yo tambien quisiera comentar en todos los blogs ,ami no me alcansa tiempo x3 jiji Pero me paso por algunos cuando tengo tiempo *w*¡

      Eliminar
  8. este efecto es demasiado hermoso!, vamos a ver cual de todos utilizo *w*

    ResponderEliminar

Hola :3 Bienvenidos a Lunany-kawaii
Debera seguir las siguientes reglas:
-No insultos
-No spam
-Ni peleas
gracias ♥