Crear una barra de navegación

Después de mucho tiempo me he decidido a introducir nuevas modificaciones en mi blog y como es habitual, cada cambio que hago os lo cuento. Ahora me he decidio por colocar una barra de navegación con un menú para que sirva de guía a los usuarios del blog o para dirigirlos a los sitios que el autor del blog, en este caso yo, le interese más.

1.- Empezamos creando dos nuevas "variables" que utilizaremos más adelante para dar color al texto de los menús y al fondo, así desde la pestaña "Fuentes y colores" podremos modificar su color. Se colocan debajo de las demás "variables":




2.- Diseñamos la barra adaptándola a la configuración de nuesto blog y al lugar en que queremos situarla (todo el ancho del blog (body) o sólo en la parte principal del blog (main); yo optaré por esta segunda opción. Estos parámetros podemos colocarlos en cualquier lugar del código HTLM entre y <:/head>, así que lo pondremos después de "description":


/*-- (Menú) --*/

#nav {
clear:both;
margin:1px auto 1px auto;
width: 966px;
height:30px;
background: url(http://xosse.dorrio.googlepages.com/fnd_marc_prev2.GIF) repeat-x;
overflow:hidden;
}

#nav_l {
float:left;
width:966px;
margin:0px; padding:0px;
overflow:hidden;
height:30px;
}

.menu {
float:left;
margin:5px 1px;
padding:3px;
width: 400px;
}

.menu li {
display: inline;
list-style: none;
margin:0;
padding:0;
}

.menu ul, .menu ol {
display: inline;
list-style: none;
margin:0;
padding:0 10px 0 0;
}

.menu a, .menu a:visited {
color: $colormenu;
font-weight: bold;
margin:0;
padding: 3px 10px 3px 10px;
text-decoration: none;
}

.menu a:hover {
background: $colorbgmenu;
text-decoration: none;
font-weight: bold;
border:1px solid #fff;
}

#subscribe {
float: right;
width:192px;
height:32px;
margin:4px 4px 3px 4px;
}

.rss {
float:left;
margin:7px 5px 5px 0px;
width:500px;
}

.rss ul {
margin: 0; padding: 0 2px;
}

.rss li {
background: url(http://bp2.blogger.com/_Zuzii37VUO4/R2iVYyjZEeI/AAAAAAAACew/
TXSgAsWEBLA/s1600/rss.gif) no-repeat 0 3px;
margin: 0 2px 0 0;
padding: 3px 0 3px 20px;
list-style: none;
font-size: 12px;
color:$colormenu;
display: inline;
font-weight: bold;
}

.rss li a {
font-size: 12px;
color:~$colormenu;
}

En negrilla van algunos de los parámetros quepodeis modificar a vuestro gusto (todos son modificables pero estos prsentan menos problemas)

3.- Para finalizar introduciremos el siguiente código en el blog y lo haremos en algún lugar entre y . Si queremos que ocupe todo el cuerpo lo pondremos al inicio; para que ocupe sólo la parte principal lo haremos en 'main'. Como mi barra irá debajo del título, expando la "plantilla de artilugios" y pego el código debajo del widget 'title':