Añadir una menubar a esta plantilla

Como ves he añadido la menubar a esta plantilla y lo he hecho de forma que siga manteniendo las proporciones que la caracterizan.

Para empezar he aprovechado la zona del crosscol, como vengo haciendo en todos los blogs.
El crosscol es una zona vacía que blogger deja preparada para añadir publicidad.
Como no está definida en el CSS, si no se utiliza no ocupa espacio. Pero podemos definirla y aprovecharla para la barra de menús.

Así que lo primero es añadirle las definiciones.

Entra en tu blog, Diseño/Edición de HTML y NO EXPANDAS ARTILUGIOS.

Si quieres que siga un orden lógico, debajo de las definiciones de la cabecera, o sea, justo encima de /* Posts, añadimos las definiciones del crosscol así:

/*Crosscol
----------------------------------------------*/
#crosscol-wrapper {
background: #ff9900 url("http://www2.blogblog.com/no565/bg_desc_top_$startSide.gif") no-repeat $startSide top;
height:auto;
margin-top:0;
margin-$endSide:0;
margin-bottom:10px;
margin-$startSide:0;
padding-$endSide:0;
padding-bottom:0;
}

Como ves ya he añadido parte del fondo que le dará el mismo aspecto que a la zona de descripción del blog. La otra mitad se la añadiremos en las definiones de la menubar.

¡IMPORTANTE!: Si tu plantilla es la otra, que tiene otros colores, cambia las cifras que hay en las dos direcciónes, en ésta y en la que pondremos luego, o saldría esta barra de ese color.
Has de cambiar la cifra del color, la que empieza con la almohadilla # y la de la dirección, el 565, por la otra el 897.

(Un inciso: Si no vas a usar la zona de descripción de tu blog, ya sea porqué no tiene descripción, ya sea porqué la has añadido a la cabecera en una imagen, puedes eliminar directamente toda la zona de la descripción del blog, eliminando los bloques que hay bajo esto
/* Description ----
hasta el principio de las entradas, o del crosscol. De esta forma evitarás duplicar estas barras de colores.)

Sigamos con la menubar.

Ahora añadiremos dos variables para que los enlaces tengan unos colores propios, añadiendo ésto:

<Variable name="menubarLinkColor" description="Menubar Link Color"
type="color" default="#ffffff" value="#002E3F">
<Variable name="menubarHoverColor" description="Menubar Hover Color"
type="color" default="#ffffff" value="#002E3F">

entre las variables de color ya existentes, por ejemplo: bajo la última que se ve que lleva la palabra color en el name.

Ya definidas las dos variables que van a permitir cambiar el color de los enlaces, tanto en su aspecto normal, como al poner el ratón encima, vamos a definir el estilo de la menubar, añadiendo ésto:

.menubar {
background:url("http://www.blogblog.com/no565/bg_desc_bot_$startSide.gif") no-repeat $startSide bottom;
}
#menubar h2 {
display:none;
}
#menubar ul {
list-style: none;
padding-top: 5px;
padding-$startSide: 150px;
padding-bottom: 5px;
padding-$endSide: 0;
}
#menubar li {
float: left;
}
#menubar a:link, #menubar a:visited {
padding: 5px;
display: block;
color: $menubarLinkColor;
}
#menubar a:hover {
color: $menubarHoverColor;
}

debajo de las del Crosscol.

Como puedes ver, en la primera de las definiciones ya le he añadido la parte de abajo de la imagen que enmarcará los enlaces.

También puedes ver que los enlaces empiezan en la zona naranja, quedando vacía la zona gris.

Esto lo he hecho para evitar que algún enlace quedara a caballo entre las dos zonas, ya que es bastante difícil hacer que encajen perfectamente, pues no puedes separar el primer enlace del segundo con una distancia distinta a la de los demás y si el primero fuera muy largo se saldría del espacio ocupado por la parte más oscura de la izquierda, pues es una sola imagen.

(Si eres un manitas del photoshop y puedes modificar esta zona para dejar solo la franja naranja, podrías hacer que los enlaces empezaran justo al principio. En este caso tendrás que cambiar el padding-$startSide, de #menubar ul, reduciendo el 150 hasta la cantidad que necesites.
Para hacerlo selecciona las direcciones, pégalas en tu navegador, una a una y antes de darle a enter bórrale _$startSide a ambas o te dirá que no se pueden mostrar.)

¡Bien! Colocadas las definiciones de estilo, vamos a añadir el código HTML necesario para que ahí haya una barra de menús.

Para eso baja hasta encontrar ésto:

<div id='content-wrapper'>

Debajo verás el código del crosscol. Ha de quedar así:

<div id='crosscol-wrapper' showaddelement='no' style='text-align:center'>
<b:section class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList10' locked='true' title='Menubar' type='LinkList'/>
</b:section>
</div>

¡ATENCION!

Fíjate que he colocado un 10 remarcado. Es una cifra alta, por si ya tienes listas de enlaces en tu blog, para que no te de error de id duplicada. Pero si sabes o piensas que en tu blog hay ya más de 10 listas de enlaces, cambia ese 10 por un 20 o lo que haga falta.

Llegados a este punto ya podrás hacer vista previa.

Si has seguido mis indicaciones, el blog debería cargar sin ningún problema.

No verás nada, solo la barra naranja vacía. Es normal. Para ver los enlaces tendrás que añadirlos, así que, de momento guarda plantilla y cuando te diga que los cambios se han guardado ya podrás ir a Elementos de la página.
Allí verás la Menubar bajo la cabecera.
Pincha en Editar y añadéle los enlaces que quieras que se vean ahí.
Guarda y los verás.

Una vez colocados podrás modificar el color de los enlaces, si no te gusta el que le he puesto yo.

Recuerda que el color del hover (el que se ve al poner ratón encima del enlace), no se ve en la vista que hay bajo la paleta de colores.
Para ver ese color has de guardar cambios, ver el blog de forma "normal" y si no te convence, volver a cambiárselo.

Una última cosa a tener en cuenta:

Las medidas que he dejado a la menubar, márgenes de los enlaces, etc. puedes verlos distintos al estar en tu blog como administrador/a. Eso es debido a las herramientas de edición del gadget, que ocupan un espacio bajo los enlaces, aunque ahí no haya ningún enlace.
No te preocupes por ello, quien entre a ver tu blog lo verá igual que tu estás viendo éste.