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 

Vista Previa Clic aqui

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 ♥