-->

11 mayo 2014

Tutorial menú Top 'LOVE' ♥ con efecto zoom

Bueno,este ese el menú que tenía yo antes en el blog,y os lo voy a compartir,bloggeras domingueras XD
Bueno,paso 1:
Nos dirijimos a plantilla,edición de HTML y apretamos las teclas CTRL+F y nos saldrá un buscador,en él busca:
</body> o <body> si tu plantilla no es la Picture Windows
Ahora,pegamos el siguiente código...


<style>.MENUlove { /* BORDE TOP */font-family: arial;font-size: 11px;text-transform: uppercase;padding: 10px;position: fixed;left: 0px;top: 0px;width: 100%;overflow: hidden;text-align: center;border-top: 5px solid #FFCEC6;-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease;-o-transition: all 0.8s ease;}.MENUlove:hover { /* BORDE TOP HOVER */border-top: 5px solid #BBE7D9;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;}.MENUlove a { /* LINKS */background: #FFCEC6;border-radius: 0 0 30px 30px;color: #fff;text-decoration: none;padding-left: 50px;padding-right: 50px;padding-top: 10px;padding-bottom: 10px;text-shadow: 0px -100px 1px #FFF;-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease;-o-transition: all 0.8s ease;.MENUlove a:hover { /* LINKS HOVER */background: #BBE7D9;color: transparent;font-style: italic;padding-left: 20px;padding-right: 80px;text-shadow: 30px 0px 0px #fff;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;}</style><div class="MENUlove"><a href="#">HOME</a><a href="#">ABOUT</a><a href="#">SITE</a><a href="#">LINKS</a><a href="#">GOODIES</a><a href="#">BACK</a></div> 
Editemos...
Azul cursiva:COLOR DE FONDO QUE QUIERAS
Azul normal:La sombra de los links
Verde clarito:Color,tamaño etc del borde.
Verde oscuro:Fondo de los links
Marrón:Borde del menú,color,tamaño etc(te recomiendo que pongas el de color de fondo normal)
Las # reemplazalas por la url de tus páginas o entradas,si quieres tener varias entradas en una pestaña,copia la url de la sección de etiquetas que tenga y reemplazala por las #,también cambia los nombres por los que tendrán tu página.
Bueno,esto ha sido todo por el tutorial,¡besukis!
Créditos:X 

No hay comentarios:

Publicar un comentario

Hola :)
Antes que nada,quería deciros que no insulteis ni causeis spam,hay que ser respetuoso,amigos :)