Tutorial:Menu 6 ♥

Hola,hoy les traigo un menu ,hiba a publicar otro menu que es bonito ,pero primero este ,estuve asiendo una plantilla de blogskins ,pero que pasare a hacer una plantilla blogger ,se me hace mas facil alli ,ya la de blogskins la terminare cuando me alcance tiempo, Are una de k-pop :3 ,y agracias a las chicas que votaron por mi en el concurso ¿Que diseño sera mejor?,llege primer lugar n.n y aparte llego el blog a 400 seguidores,me gustaria hace algo para ustedes,me pendre a hacer la plantilla ,lo haré muy lindo para ustedes >w<.


Bueno seguimos con el tutorial,Aqui les dejo una muestra:

Menu

Menu

Menu

Para ponerlo en su blog :
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>
.men3a:hover {
box-shadow: 0 4px #7ED1A9;/*Color de Sombra del menu parte baja al pasar el cursor*/
top: 2px;
}
.men3a {
border-radius: 10px 10px 10px 10px;/*Redondear los bordes del Menu*/
}
.men3 {
background: #A9E2C7;/*Fondo del Menu*/
color: #fff;/*Color de la letra*/
box-shadow: 0 6px #7ED1A9;/*Color de Sombra del menu parte baja*/
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
.box {
border: none;
font-family: inherit;
font-size: inherit;
cursor: pointer;
padding: 8px 15px;/*Tamaño y altura del menu 8 es el ancho ,15 es la altura*/
display: inline-block;
margin: 5px 5px;/*Espacios entre los menus*/
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
outline: none;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
</style>
<div class="box men3 men3a"><a href="Url de pagina">Nombre pagina</a></div>
<div class="box men3 men3a"><a href="Url de pagina">Nombre pagina</a></div><div class="box men3 men3a"><a href="Url de pagina">Nombre pagina</a></div>

Este codigo :

border-radius: 10px 10px 10px 10px;/*Redondear los bordes del Menu*/

Si no quieren que este redondo la parte de ariba los dos primeros 10 lo ponen a 0 asi:

border-radius: 0px 0px 10px 10px;

quedaría así:

Para aumentar mas menus solo agrega despues de </a>

<div class="box men3 men3a"><a href="Url de pagina">Nombre pagina</a></div>

Bueno espero que les haya gustado :3 ,cual quier pregunta me avisan en un comentario .

Codigo :tympanus

Pequeño avisito:

Si tienes algun probelma en tu diseño o algun tutorial no entiendes 

Pueden enviarme mensaje a la pagina facebook Lunany kawaii clic aqui para ir ,solo hacen clic en mensaje ,y escribes lo que desees preguntar,te ayudare :3 ,paro mas atenta al facebook 

aun no tengo mi firmita de molang u.u¡ no tengo tiempo para hacerlo asi que me lo haran x3