8/2/13

[Tutorial]Menu Flotante


hola ya ya esta vierner por fiiiiiiiiiiiiiiiiiiiin que ganas ya n.n bueno traigo un tuto que me pidio una gran y buena amiga jajaj bien es un menu flotante 
Lo primer es ir a diseño y añadir un jabascrip o como se llame me seguis no >< y pegar dentro de la cajita este codigo

<div class="lulu" style="background-color: #ffc4dc; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px dashed rgb(170, 170, 170); color: white; font-family: 'Comic Sans MS'; font-size: 13px; left: 50px; margin-top: 15px; padding: 4px 5px 0px; position: fixed; text-align: justify; top: 200px; width: 200px;">
<center>
Titulo del Navegador o lo que quieras</center>
</div>
<div class="box" style="background-color: white; border-top-style: none; left: 50px; padding: 5px; position: fixed; text-align: justify; top: 250px; width: 202px;">
<center style="font-family: 'Comic Sans MS'; font-size: 13px;">
<img src="Imagen principal" style="-webkit-transition: 1s; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; border-top-left-radius: 16px; border-top-right-radius: 16px; font-family: 'trebuchet ms'; font-size: 12px; opacity: 0.7;" width="200" /></center>
<div style="text-align: start;">
<span style="color: #666666; font-family: Verdana, Geneva, sans-serif; font-size: xx-small;"><style>
a.jeonjin1 {
letter-spacing:1px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
margin:1px;
cursor:pointer;
text-transform:uppercase;
display:inline-block;
font:8px tt;
text-align:center;
background: #fff;
width:95px;
color:#888;
padding:5px;
border-left:20px solid #eee1ff;
border-right:20px solid #eee1ff;
text-decoration:none;
}
a.jeonjin1:hover{
border-left:20px solid #dfcffe;
border-right:20px solid #dfcffe;
}
@font-face {
font-family:tt;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}
</style><center>
<a class="jeonjin1" href="Url">Home</a><br/>
<a class="jeonjin1" href="Url">Categoria</a><br/>
<a class="jeonjin1" href="Url">Categoria</a><br/>
<a class="jeonjin1" href="Url">Categoria</a></center></span></div>
</div>

Rojo es el color a eleguir de donde va el titulo de la caja donde va el menu
Naranja es la imagen que encabeza el menu
Verde es el color del menu

IMPORTANTE CREDITOS
La caja flotante es de pame
y el menu de Kazumi Nahiara

10 comentarios:

  1. Respuestas
    1. Si al final no voy a hacer remo estpy muy cansada para hacerla me gusta este diseño ademas estoy retocando cosas

      Eliminar
  2. exelente tutorial pero me hubiera gustado ver como quedaba u.u

    ResponderEliminar
    Respuestas
    1. pues pondre una foto de como wueda ok n.n

      Eliminar
  3. waaa esta supaa lindo
    gracias kummy ^u^
    saludos
    esperamos el new diseño no te preocupes linda para mi no hay prisa tomante tu tiempecito vale vale
    sayonara!!

    ResponderEliminar
  4. aah pues esta bello*o*A ver si lo pongo en mi otro blog!!

    ResponderEliminar
  5. OMG veo una nueva cabecera (*-*) y le queda chulo el menú!! (>w<)/

    Por cierto Kumy necesito comunicarme contigo, por donde podemos hablar en privado? ........................No te preocupes que no me pienso confesar XD pero si es para algo importante :D

    ResponderEliminar
    Respuestas
    1. pues por gmail no?? yo hoy sabado tengo todo el dia libre y pueddo contestar sin problemas

      Eliminar

Holaa!! muy buenos días-tardes-noches espero que te haya gustado la entrada & si me dejas una huellita estaría muy agradecida.
Si tienes alguna duda no te olvides de mandarme un mail a mi correo o bien hacerlo por medio de la sección de dudas
candelaaisiska@gmai.com