CÓMO HACER UN MENÚ POR CATEGORÍAS

Bueno antes aclarar, que no es un menú como el de las páginas de blogger, así que no se puede poner el enlace a la página principal ni a páginas estáticas. Funciona igual que las etiquetas, ya que es ese mismo gadget pero con un poco de estilo para que quede más chachi.

Lo primero que tenemos que hacer es obviamente ir a Diseño → Agragar un gadget, elegimos el de etiquetas y marcamos la opción nube, esto es muy importante. Además, si tenéis muchas etiquetas podéis seleccionar las que queráis que aparezcan.

Bien, hecho esto, vamos a ir a Plantilla → Personalizar → Avanzado → Añadir CSS, y pegamos este código:

.cloud-label-widget-content {
text-align: center; /*Donde queréis que quede alineado el texto*/
float:center;
font: normal normal 12px Arial; /*Tipografía*/
text-transform: uppercase; /*Para que quede en mayúsculas, si no borrar esta línea*/
}
.label-size a {
display: block;
margin: 2px 2px 0 0;
padding: 4px; 
border: 1px solid #aaaaaa; /*Si queremos borde, si no borrar esta línea*/
color:#aaaaaa; /*color del texto*/
background: #ffffff;  /*color de fondo*/
text-decoration:none; 
}
.label-size a:hover {
border: 1px solid #aaaaaa; /*Borde al pasar por encima el ratón, si no queréis borde, borrar esta línea*/
color:#333333; /*Color del texto al pasar el ratón por encima*/
background: #cccccc; /*Color del fondo al pasar el ratón por encima*/
text-decoration:none;
}

• Por defecto está puesto para que el texto esté alineado en el centro, si lo queréis a la izquierda o derecha, sustituid center por left o right respectivamente.

• La tipografía que vais a usar, podéis ajustar su tamaño cambiando el 12 por el que preferáis y la tipografía usada cambiando el Arial por el nombre de dicha fuente.

• Si vais a usar un borde podéis personalizar el grosor cambiando el 1, el tipo de línea cambiando el solid (dashed es a rayas y dotted a puntitos) y el color cambiando su código hexadecimal. Si no queréis el borde borráis esa línea de código y listo.

• Podéis ponerle un color de fondo y cambiarle el color al texto :D

[Edito]: si os salen unas letras más grandes que otras debéis añadir además este código CSS; mil gracias a Y Durmieron Felices ;)

.label-size-1 a {font-size: 12px;}
.label-size-2 a {font-size: 12px;}
.label-size-3 a {font-size: 12px;}
.label-size-4 a {font-size: 12px;}
.label-size-5 a {font-size: 12px;}

Donde sólo tienes que cambiar por el tamaño que quieras que tengan las letras, que debe ser del mismo valor