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:





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 


14 comentarios :

  1. Que precioso!! y funciona como botoncitos! *o* gracias por este, vere si le utilizo!

    ResponderEliminar
    Respuestas
    1. Si n.n el codigo era para utilizarlo como boton ,pero lo puse como menu :3

      Eliminar
  2. está muy lindo el tutorial para mi próximo diseño pondré este menu está muy kawaii

    ResponderEliminar
  3. Hermoso como siempre amiga muchas gracias n_n

    ResponderEliminar
  4. Hermoso Luna<3 , de verdad, pareciera como un boton que diria "click aqui", hehe:3 como siempre tu blog hermoso, Molang se ve super adorable en tu blog
    *--*
    ~Kisses~

    ResponderEliminar
    Respuestas
    1. P.D: cambie mi blog de enlace, podrías seguirlo porsiacaso para que estes avisada si pasa algo *--* este es su nuevo enlace:
      Lemonadebunny.blogspot.com

      Eliminar
  5. awww¡¡¡ Creo que lo usaré en mi blog ya¡¡¡ ^^ Gracias Luna *-*
    PD: Te gustaria que afiliesemos ? =) tu ya lo estas en mi bloggie *3* Un megaabrazo de pandita rosa ¡¡¡¡

    ResponderEliminar
  6. PD : Soy un despiste jajaja http://nubilactica.blogspot.com.es/ esta en la banderita 3 ( afiliados)

    ResponderEliminar
  7. Es muy bello tienes una gran creatividad te seguire en tu nuevo blog gracias x el tiempo que nos dedicas besitos Muuuaakk m<3

    ResponderEliminar
  8. muy lindo :3 me gustan mucho los menús tipo botoncitos *u*

    ResponderEliminar
  9. Me salen muy largos los menús :( de todas formas experimentaré para conseguirlo! ajja muchas gracias :)

    ResponderEliminar
    Respuestas
    1. En este codigo puedes editar el tamaño padding: 8px 15px ; /*Tamaño y altura del menu 8 es el ancho ,15 es la altura*/
      o.o¡ Si no se puede me avisas

      Eliminar

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