[Tutorial] Menu square

Hola gente de Internet me disculpo por mi ausencia en el blog pero el colegio no me a deja estar mucho en mi pc, dejando eso de lado hoy les vengo con un tutorial par poner un menú en tu blog espero les guste.

Vista Previa

TITLE TITLE TITLE TITLE TITLE

Bueno empecemos:

 Diseño> Agregar Gadget > Gadget HTML > y pegan esto:

<style>
@font-face {
font-family:tt;
src:url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}
.nav,a.nav{
border:1px solid #ebebeb;
padding:10px;
font:15px tt;
letter-spacing:2px;
display:inline-block;
text-align:center;
text-transform:uppercase;
width:65px;
background:#EC8DFD;
color:#766F77;
margin-left: 5px;
margin-right: 5px;
-webkit-transition:2s;
}
.nav:hover,a.nav:hover{
letter-spacing:4px;
box-shadow:inset -50px -40px 0px #F20BD4,inset 50px 40px 0px #fff;
-webkit-transition:3s;
color:#000000;}
</style>
<br />
<center>
<a class="nav" href="https://www.blogger.com/LINK%20HERE">TITLE</a>
<a class="nav" href="https://www.blogger.com/LINK%20HERE">TITLE</a>
<a class="nav" href="https://www.blogger.com/LINK%20HERE">TITLE</a>
<a class="nav" href="https://www.blogger.com/LINK%20HERE">TITLE</a>
<a class="nav" href="https://www.blogger.com/LINK%20HERE">TITLE</a>
</center>

Solo cambia lo que esta seleccionado

ROJO: Es el borde

Naranja: Es el color del primer fondo

Amarillo: Color de la letra del primer fondo

Verde: Color de la letra del segundo fondo

Azul: Color del segundo Fondo

Eso es todo espero les gustar

el tutorial, dudas o preguntas comentar.

Nos vemos hasta la próxima bye~