12/4/13

[Tutorial]Menu circulo con efecto zoom


Holaaaa que tal todo por blogger?   bueno si os contara lo que hice hoy ... he dado una clase en Tecnología sobre Blogs y Blogger  yo sola uajajaja con lo tímida que soy... no me reconozco bueno estoy probando cosas del nuevo editor HTLM y bueno hay tantos colores que me pierdo   bien este tuto se me ocurrió así de casualidad he convertido un Blogroll en un menu que os parece se me ocurrió ayer  bien pues empecemos primero si os interesa el menu 
si quieres ver el efecto buscaa este gadget en mi blog 
Bien pues espero que estáis preparadas para la nueva versión de blogger editor HTLM okei


  • Ir a Diseño 
  • Añadir Gadget/jabascrip
y colocar dentro de la cajita este código
<div style="text-align: center;">Nombre del menu</div>
<div class="hovergallery" style="text-align: center;"><a target="_blank" href="URL de la categoría"><img src="URL de imagen" width="50" style="border: -moz-border-radius: 14px; border-radius: 14px;" title='Nombre de la categoría'; /></a> <a target="_blank" href="URL de la categoría"><img src="URL de imagen" width="50" style="border: -moz-border-radius: 14px; border-radius: 14px;" title='Nombre de la categoría'; /></a> <a target="_blank" href="URL de la categoría"><img src="URL de imagen" width="50" style="border: -moz-border-radius: 14px; border-radius: 14px;" title='Nombre de la categoría'; /></a> <a target="_blank" href="URL de la categoría"><img src="URL de imagen" width="50" style="border: -moz-border-radius: 14px; border-radius: 14px;" title='Nombre de la categoría'; /></a></div>
E D I T E M O S
Verde:Es la imagen que ira dentro del menu 
Naranja:Es la url de la categoría 
Rojo:Es el nombre de la categoría
Rosa:Es el nombre del menu si no queráis nombre elimináis nombre del menu y no ponéis nada y listo

Nota*El menu es moldeable a cualquier sitio encima de la cabecera,debajo en un gadger siempre se ajusta a donde lo coloques
Bien si quereis añadir mas categorías solo añadís esto
 <a target="_blank" href="URL de la categoría"><img src="URL de imagen" width="50" style="border: -moz-border-radius: 14px; border-radius: 14px;" title='Nombre de la categoría'; /></a>
Pero entre esto del final
/></a>aqui</div> por que si no no sale tiene que ser entre eso porque después de </div> nunca se puede añadir nada de eso

EFECTO ZOOM
Bien para el efecto zoom tenéis que hacer lo siguiente
  • Plantilla
  • Edicion HTLM
  • Buscas:]]></b:skin
Y colocas este código antes de ]]></b:skin


/*Efecto Zoom
----------------------------------------------- */
.hovergallery img{
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 1;
margin: 0 0 0 0;
}
.hovergallery img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
box-shadow:0px 0px 35px white;
-webkit-box-shadow:0px 0px 35px white;
-moz-box-shadow:0px 0px 35px white;
opacity: 1;
}

créditos  por el blogroll {x}

17 comentarios:

  1. ow que bonito gracias por compartirlo :3
    Saludos.

    ResponderEliminar
  2. rayos lindo tuto pero me gustaria ver como quedan los efectos aunque sea con una imagen XD

    ResponderEliminar
  3. Muy lindo tuto gracias por compartirlo amiga n_n

    ResponderEliminar
    Respuestas
    1. de nada la siguiente entrada sera un proyecto muy interesante

      Eliminar
  4. Muy buen tuto ;)

    Muchos Saludos y Cuidate!!

    ResponderEliminar
    Respuestas
    1. muchas gracias x pasarte siempre por mi blog

      Eliminar
  5. Respuestas
    1. de nada no sabia donde estabas como tu blog estaba cerrado

      Eliminar
  6. una muy buena forma de aprovechar ese truquito >u<

    a ver que cosas más se te ocurren ^v^

    besos kumy!!! ^-^

    ResponderEliminar
  7. si no tengo esa llave para el efecto arriba de cual otra puedo colocarlo?

    ResponderEliminar
    Respuestas
    1. La verdad es que no lo se como no cambio de plantilla no veo nunca plantillas que no sean la de Picture Windows

      Eliminar
  8. Muchisimas gracias por el tuto *0* Lo usare en mi proxima remoldelacion del blog >< y te dejo los creditos especiales!!!!! Gracias Kumy ><

    ResponderEliminar
  9. Kumy.. No Me encuentra el codigo ]]></b:skin
    :( ¿Porque?

    ResponderEliminar

Holaa!! muy buenos días-tardes-noches espero que te haya gustado la entrada & si me dejas una huellita estaría muy agradecida.
Si tienes alguna duda no te olvides de mandarme un mail a mi correo o bien hacerlo por medio de la sección de dudas
candelaaisiska@gmai.com