Gadget efecto amiga - 1

 

 Holaa(✧ ∀ ✧)
 Hoy les traigo un tutorial super ahhah nwn, de gadget efecto amigas!
Me encanto y quise compartirlos con ustedes!

Vista previa:


Tiene un efecto muy bonito cuando pones el cursor en las imágenes, y apenas aprestas una imagen sale el 
blog/entrada/ect, directamente :3

Para ponerlo en el blog:

Diseño>>>Añadir gadget>>>Javascript>>>Pegamos código!


 Código:
<style>
#comida a img{
width:auto;
height:auto;
display:inline;
margin-right:2px;
margin-left:1px;
margin-top:1px;
margin-bottom:1px;
padding: 3px;
background: #ffe8ed;
border: 1px solid #ffd1dc;
outline: solid 1px #fff;
outline-offset: -5px;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#comida a:hover img{
outline: solid 3px transparent;
opacity: 0.5;
outline-offset: -20px;
}
</style>
<div id="comida">
<center>
<a href="Link" title="Postador 1"> <img src="http://4.bp.blogspot.com/-0aTHDChGKME/UX2CyYIGMOI/AAAAAAAAEoo/h4Mtgu1FZ7U/s230/large+(17).png" /></a>
<a href="LINK" title="Postador 2">  <img src="http://4.bp.blogspot.com/-DAauw68cgZQ/UX2Cwd0eRvI/AAAAAAAAEn8/JPlwQ6kw81A/s230/large+(7).png" /></a>
<a href="LINK" title="Postador 3">  <img src="http://4.bp.blogspot.com/-ce6vHjCIfBo/UX2C0VyqrBI/AAAAAAAAEpE/ImBG0XoqWkU/s230/large2565.png" /></a>
</center>
</div>

 Este es otro muy muy parecido:
Código:
 Rojo, link de la entrada/post/pagina ect, verde, puedes poner ahí click aquí, y en azul el url de la imagen


<style>
#comida a img{
width:auto;
height:auto;
display:inline;
margin-right:2px;
margin-left:1px;
margin-top:1px;
margin-bottom:1px;
padding: 3px;
background: #ffe8ed;
border: 1px solid #ffd1dc;
outline: solid 1px #fff;
outline-offset: -5px;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#comida a:hover img{
outline: solid 3px transparent;
opacity: 0.5;
outline-offset: -20px;
}
</style>
<div id="comida">
<center>
<a href="http://www.blogger.com/" title="Exemplo"> <img src="http://static.tumblr.com/0xqvkot/XWpmsgcou/1850.png" /></a>
<a href="http://www.blogger.com/" title="Exemplo">  <img src="http://static.tumblr.com/0xqvkot/Oixmsgcpe/1854.png" /></a>
</center>
</div>

Edita:  Lo color rojo, es el url de el blog/pagina ect, lo verde, puedes poner: click aquí, azul, el url de la imagen nwn


 ¡Espero les guste! nwn
Nos leemos~



No hay comentarios:

Publicar un comentario

¡Hey, gracias por leer la entrada!

- Sí vas a dejar un comentario que sea referente a la entrada.
- Comenta con respeto.
- No spam.
- No malas palabras.
- Respeta al administrador y a los usuarios del blog.
- Sí tienes problemas con un tutorial comenta, para poder ayudarte.

- Símbolos:
☯♠♤♣♧ ♥♡♦♢♔ ★✖ ✗✘✌✿☽ ☾♩ ♪ ♫ ♬ ✧ ❝❞ ❀ ❄

- Emojis:
(>‿◠)✌ (✿◠‿◠) (▰˘◡˘▰) ( ͡° ͜ʖ ͡°) (≧∀≦) ( ˘ ɜ˘) (・w・)[̲̅$̲̅(̲̅ ͡° ͜ʖ ͡°̲̅)̲̅$̲̅] (ノ◕ヮ◕)ノ*:・゚✧ ( ͡° ʖ̯ ͡°) ( ͡° ᴥ ͡°) ヽ(゚▽゚*)乂(*゚▽゚)ノ

Recuerda dejar la URL de tu blog para poder visitarlo.

Sí te gusto la entrada no olvides seguir el blog, así no te pierdes ninguna entrada.

Contacto:

(para cualquiera cosa idk)

gladiuskagg@gmail.com
-Glad.