Coloca un menú personalizado

¡Hola bellas! Habrán visto que en mi plantilla descargable True Colours hay debajo del header un menu super chulo completamente personalizado, aquí les explico cómo ponerlo y cómo personalizarlo a su gusto.

Colocarlo es más que sencillo. Deben copiar este código que les dejo y pegarlo en un nuevo gadget de HTML/Javascript.

<style>
.menu a{
display: inline-block; /* Formato del menú */
font-family: Trebuchet MS; /* Fuente*/
padding: 10px;
color: #fff;
border-radius: 4px;  /* Bordes redondeados */ 
margin: 2px;
-moz-transition: all 0.4s ease-out;
-webkit-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
background-image: url(http://i47.tinypic.com/2cfvzwo.jpg); /* Imagen de fondo */ 
}
.menu a:hover { /* Para cuando pasas el cursor por encima */ 
background: #ff78a1; /* Color de fondo, pueden cambiarlo por el de arriba y que sea una imagen */ 
color: #fff; /*Color de la letra*/
border-radius:3px; /* Bordes redondeados */ 
}
</style>

<center>
<div class="menu"><a href="http://www.blogger.com/" >Refresh</a> <a href="http://www.blogger.com/" >Link1</a> <a href="http://www.blogger.com/" >Link2</a> <a href="http://www.blogger.com/" >Link3</a> <a href="http://www.blogger.com/" >Link4</a> <a href="http://www.blogger.com/" >Link5</a> <a href="http://www.blogger.com/" >Link6</a>
</div>
</center>

FORMATO DEL MENU

Si quieren que se vea por debajo del header, sólo tienen que arrastrarlo hasta allí. Y se verá tal como en True Colours.

Pero si quieren colocarlo en el sidebar y que salga como una listita, tal como se ve a continuación, tienen que cambiar la línea display: inline-block; por display: block;

Y agregar width: 100px; debajo de background-image (en .menu a) para que les salga del ancho que ustedes quieran y no necesariamente del que tiene su sidebar por defecto.

LINKS

En la segunda parte, la que está entre los 'center' es la de los links que se verán, cambian el link (blogger.com) y el nombre (link1, link2, etc.) por el que ustedes quieran. Pueden agregar o quitar para que hayan tantos links como deseen.

Y bueno, esto es todo. Si les queda alguna duda, dejen un comentario que como siempre intentaré ayudarlos! Un besazo :)