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 {Ahora coloca en un gadget HTML/JavaScrip de preferencia colócalo en la cabecera
-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);
}
<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
Gracias cualquier inquietud me lo pueden dejar en los comentarios GRACIAS (☆▽☆) ♥ ♥
waaa mucas gracias por esta tutorial~!!
ResponderEliminarsaludos
De nada Gracias por tu visita saludos
Eliminarme encanto gracias x compartirlo :)
ResponderEliminar*=saludos=*
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