[Tutorial] Menu *Love*


Hola a todos perdón por no haber publicado nada estas semanas pero la verdad es que estoy en vacaciones y es el mes de descanso de todo, pero he considerado publicar este Tuto ya que me lo pidio ♥Grimmy♥ 
Y como ya les había informado quiero que este blog tenga de todo así que vamos al tutorial ~(‘▽^人) 
Yo lo tengo en mi blog así que no es necesaria una preview.

  • Vamos a Plantilla , hacemos click en editar HTML
  • Buscamos en el buscador (Ctrl+F) la siguiente linea ]]></b:skin> y antes del codigo colocas lo siguiente
.topo {
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s;
}
.topo:hover {
position:absolute;
margin-top: 147px;
}
.menu1{
padding: 5px;
width: 100px;
color: #ffffff, !important;/*cor da fonte*/
box-shadow: inset 0 1px 1px rgba(0,0,0,0.15), 0 1px 1px rgba(255,255,255,0.35);
text-shadow: 2px 1px 1px #d4dee2;
background: rgba(0,0,0,0.03);
text-align: just;
transition:All 0.3s ease;
-webkit-transition:All 0.3s ease;
-moz-transition:All 0.3s ease;
-o-transition:All 0.3s ease;
}
.menu {
display : block;
font-size: 10px;
font-family: 'Wendy', sans-serif;
background-repeat : no-repeat;
width: 40px;
text-indent : 8px;
text-decoration : none;
line-height : 21px;
margin-bottom : 2px;
padding: 0px;
color: #ffffff !important;
background-color: #ffbfbf;
box-shadow: inset 0 0 20px rgba(0,0,0,0.04), 1px 1px 0px rgba(0,0,0,0.04);
text-shadow: 1px 1px 0px rgba(0,0,0,0.08);
text-transform:uppercase;}
.menu a {
text-transform: uppercase;
text-decoration:none;
}
.menu:hover {
text-decoration : none;
background-color: #e1e8eb;
box-shadow: inset 0 0 20px rgba(0,0,0,0.04), 1px 1px 0px rgba(0,0,0,0.04);
}
 Ahora coloca en un gadget HTML/JavaScrip de preferencia colócalo en la cabecera
<div style="position: absolute;z-index: 2; margin-top: -38px; margin-left:25px;color: #fff; font-weight: bold;width: 320px;
font-family: 'Open Sans'; font-size: 12px; text-transform: uppercase;text-shadow: 1px 1px 0px rgba(0,0,0,0.05);">- blog de tutoriais do Having Cherry (⌒▽⌒)☆</div>
<div style="position: absolute;margin-left: 770px; margin-top: -192px;">
<div class="topo"><div class="menu1">
<a href="LINK" class="menu"> Home </a>
<a href="LINK" class="menu"> About </a>
<a href="LINK" class="menu"> Ask </a>
<a href="LINK" class="menu"> Tumblr </a>
<a href="LINK" class="menu"> Twitter </a>
<a href="LINK" class="menu"> Facebook </a>
<div style="position: absolute;margin-left: 40px; margin-top: -143px; width: 53px; height: 135px;
padding: 4px"><img src="http://static.tumblr.com/eibvjdd/bVFmzsu5b/02.png" />
</div></div>
<img src="Aqui va la imagen de menu que les dejo a continuación" />
</div></div>

Aquí les dejo algunas opciones de color para MENU.

    
                                                              

Las imagenesde alado del menu deben ser de medidas de 55x137

PD: Los créditos son para Having Cherry del Tuto ;)
Gracias cualquier inquietud me lo pueden dejar en los comentarios GRACIAS (☆▽☆) ♥ ♥

4 comentarios:

  1. waaa mucas gracias por esta tutorial~!!
    saludos

    ResponderEliminar
  2. me encanto gracias x compartirlo :)
    *=saludos=*

    ResponderEliminar
  3. Hey! muy buena idea, pero no veo nada... es que está demasiado tenue para mi vista tan peresosa... aun así me parece muy buena la idea, y se agradece compartir el código, saludos.

    ResponderEliminar