Tutorial:Menu 10 + Nuevas Autoras♥




Hola , losiento por desaparecerme de nuevo ;u; últimamente estoy muy ocupada, ya que mis padres quieren que les ayude en su tienda  ¡ pensé que tendría vacaciones ,pero mis padres quieren que baje todos los dias, pero bueno algunos dias si me deja libre,aparte que también fui a la playa como 3 dias y bueno sobre las nuevas autoras, quise elijir , pero mejor lo hice a sorteo antes que me desaparezca de nuevo  y salieron las siguientes ♥



Vivi
Dina -minjy 

Y bueno ellas son las nuevas autoras las agregare  y bueno les mandare también mi facebook personal para poder hablar y otras cosas ♥ y puedan también ayudarme si pueden en las proximas plantillas que haga ♥
Hoy dia no tengo tantas cosas que hacer asi que aproveche para traerles un nuevo menu 


Para las Plantillas Basicas : Vallan a Diseño/Añadir un nuevo gadget/Javascript/Html
Para las plantillas Clasicas o Blogskins : Pegar en el sitio que deseen que este
(para copiar el codigo ,selecciona todo el codigo y Presionas Ctrl+C y ya lo tienes copiado y lo pegas donde te indique )
<style>
nav a {
position: relative;
display: inline-block;
margin: 5px 5px;
outline: none;
color: #fff;/* Color del texto*/
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 400;
text-shadow: 0 0 1px rgba(255,255,255,0.3);
font-size: 1.35em;
}
nav a:hover,
nav a:focus {
outline: none;
}
.menu10 a {
line-height: 2em;
-webkit-perspective: 800px;
-moz-perspective: 800px;
perspective: 800px;
}
.menu10 a span {
position: relative;
display: inline-block;
padding: 3px 15px 0;
background: #FDBDBD;/* Fondo del menu*/
box-shadow: inset 0 3px #FDEDB8;/* Borde superior del menu*/
-webkit-transition: background 0.6s;
-moz-transition: background 0.6s;
transition: background 0.6s;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
}
.menu10 a span::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
        background: #FFE6BE;/* Fondo del menu cuando pasa el cursor*/
        color: #BB9952;/* Color del texto cuando pasa el cursor*/
content: attr(data-hover);
-webkit-transform: rotateX(270deg);
-moz-transform: rotateX(270deg);
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
transition: transform 0.6s;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
pointer-events: none;
}
.menu10 a:hover span::before,
.menu10 a:focus span::before {
-webkit-transform: rotateX(10deg); -moz-transform: rotateX(10deg);
transform: rotateX(10deg);
}
</style>
<center><nav class="menu10">
<a href="Url del la pagina"><span data-hover="Home">Home</span></a>
<a href="Url del la pagina"><span data-hover="Afiliados">Afiliados</span></a>
<a href="Url del la pagina"><span data-hover="Tutoriales">Tutoriales</span></a>
<a href="Url del la pagina"><span data-hover="Recursos">Recursos</span></a>
<a href="Url del la pagina"><span data-hover="Otros">Otros</span></a>
</nav>
</center>
Lo que esta de color rosado es el texto del menu al pasar el cursor 
Lo de color azul es el texto del menu
Si quieres Añadir otro menu mas , solo copia despues de </a> el siguiente codigo :
<a href="#"><span data-hover="Otros">Otros</span></a>
Y bueno eso seria todo , le dan guardar y listo  ♥ Estoy respondiendo los comentarios ahorita mismo ♥



17 comentarios :

  1. gracias por el tutorial Luna, se ve muy lindo

    ResponderEliminar
    Respuestas
    1. De nada , gracias por pasar por el blog :3 ♥

      Eliminar
  2. O.O OMG! Jajajjaja Soy nueva autora *00*
    Me dio infarto xD Nunca lo crei
    jajajajjaja >.<
    Muy buen menu Besos *00*

    ResponderEliminar
    Respuestas
    1. PD;Soy Dina-Minjy xD jajaj & muchas gracias ;P

      Eliminar
    2. owo¡ jaja tu correo que me comentaste , con ese te agrego en el blog? :3

      Eliminar
  3. Hola~ Que bien que soy nueva autora, me hace mucha ilusión ♥
    Una cosa importante, el gmail que puse en el comentario no es el gmail que tengo vinculado con esta cuenta de blogger, siento el fallo >.< Agregame con este gmail: ArminArlertBlogs@gmail.com

    Gracias por todo♥

    ResponderEliminar
    Respuestas
    1. Hola :3 si, justo estuve pensando en ver primero si el gmail que pusieron en el comentario estaría bien

      Eliminar
    2. Te enviare un mensaje a tu correo :3

      Eliminar
  4. Se ve genial ! Felicidades a las que consiguieron ser autoras ! Usare el menu ! Y te invito a pasar po4 el concurso que estoy organizando ^^

    Larita

    Todocreadoparati.blogspot.com

    ResponderEliminar
  5. Excelente entrada :) Te invito a visitar mi blog, saludos preciosa!
    (por cierto, no sé en cual de las dos clasificaciones entra mi plantilla, me ayudas?)
    SweetBeautyReviews

    ResponderEliminar
    Respuestas
    1. Ya pude! Te invito a que veas cómo quedó, gracias preciosa!

      Eliminar
    2. Hola losiento por no responder antes , me alegro que si pudiste arreglarlo <3

      Eliminar
  6. Me encanto este menu intente agregar el que trae submenus pero no me funciono,pero este si y quedo muy lindo gracias por compartir los codigos en tu hermoso blog. ^^

    ResponderEliminar
    Respuestas
    1. De nada nwn , me alegro que este si te funcione <3

      Eliminar

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