Tutorial: Menú en cabecera del Blog

Hi minna~

Les traigo un nuevo y lindo tutorial.

Example:

 

 Empezemos!!

❤ Este tutorial fue creado para las plantillas de diseñador.
❤ Primero deben ir a Plantilla -Editar HTML y buscan lo siguiente ]]></b:skin> arriba de este pegan el siguiente código.

.haha{
width:50px;height:40px;
box-shadow:0px 0px 2px 3px #FFE3E5;
background:#FFEBED;
font:10px short stack;
text-align:center;
Text-decoration:none;
color:#888;
display:inline-block;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
padding-bottom:5px;
padding-top:20px;padding-left:0px;padding-right:0px;
display:inline-block;
-webkit-border-bottom-right-radius: 35px;
-webkit-border-bottom-left-radius: 35px;
-moz-border-radius-bottomright: 35px;
-moz-border-radius-bottomleft: 35px;
border-bottom-right-radius: 35px;
border-bottom-left-radius: 35px;
}

.haha:hover{
background:#FFFFFF;text-shadow:0px 0px 0px #fff;
color:#777;height:50px;
}
.huhu{
width:50px;height:40px;
box-shadow:0px 0px 2px 3px #F1E3FF;
background:#F7EFFF;
font:10px short stack;
text-align:center;
Text-decoration:none;
color:#888;
display:inline-block;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
padding-bottom:5px;
padding-top:20px;padding-left:0px;padding-right:0px;
display:inline-block;
-webkit-border-bottom-right-radius: 35px;
-webkit-border-bottom-left-radius: 35px;
-moz-border-radius-bottomright: 35px;
-moz-border-radius-bottomleft: 35px;
border-bottom-right-radius: 35px;
border-bottom-left-radius: 35px;
}
.huhu:hover{
background:#FFFFFF;text-shadow:0px 0px 0px #fff;
color:#777;height:50px;
}

 ❤ Después dan guardar plantilla

1°aqui pueden cambiar el color del fondo del menu 

2°aqui pueden cambiar el color del hover, eso es cuando pasar el cursor por arriba del menu
3°y aqui pueden ir jugando con el valor del tamaño para que les quede como a ustedes gusten.

 ❤Ahora abriremos un gadget para pegar el siguiente codigo

<div style="position:absolute;top:-562px;left:-62px;width:250px; color:#aaa;">
<center>
<a class="haha" href="url">About</a>
<a class="huhu" href="url">Stuff</a>
</center></div><div style="position:absolute;top:-562px;left:580px;width:250px; color:#aaa;"><center>
<a class="haha" href="url">Linky</a>
<a class="huhu" href="url">Home</a></center>
</div>

 ❤y guardamos

1°aqui pueden ir jugando con el codigo(este es el del menu del lado izq de tu pantalla) hasta que les quede como ustedes gusten 

2°aqui pueden tambien ir variando los codigos (este es del menu del lado derecho de tu pantalla)
3°y aqui debe ir la url de las paginas para tu menu

BUENO MIS BLOGUERITAS ESO SERIA TODO,NOS VEMOS EN OTRA ENTRADITA

BYE~