[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}