Cómo poner una barra superior fija en el blog

He recibido varios e-mails en los que me preguntaban cómo había puesto la barra superior que tiene ahora mi blog, que se queda fija cuando vamos bajando en la página.
Para no escribir varias veces lo mismo, y puesto que probablemente haya alguien más interesado, he pensado que sería buena idea publicar un mini tutorial. Y digo mini, porque es muy sencillo. Ahora lo veréis.
En primer lugar necesitamos el código HTML para crear un menú de pestañas. Este código lo podréis encontrar en infinidad de webs dónde os expliquen cómo hacer un menú de pestañas en Blogger.
En el editor de la plantilla de vuestro blog, y encima de ]]></b:skin>, tendréis que poner lo siguiente:

#mbtnavbar {    background: #000000;    width: 1000px;    color: #000000;    margin-top:0px;      margin-bottom:50px;      margin-right:0px;      margin-left:0px;    padding: 0px 0px 0px 380px;    position: relative;    border-top:0px dotted #9b9a9a;      border-bottom:0px dotted #9b9a9a;   height:40px;   position: fixed; top: 0px; left: 0px; z-index: 999; width:100%;
}
#mbtnav {    margin: 0;    padding: 0;   text-align: center; } #mbtnav ul {    float: center;    text-align: center;   list-style: none;    margin: 0;    padding: 0; } #mbtnav li {    list-style: none;    margin: 0;    padding: 0;    border-left:0px solid #ffffff;    border-right:0px solid #ffffff;    height:40px;
} #mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {    color: #ffffff;    display: block;    font:normal 16px Oswald, sans-serif;   margin: 0;    text-transform: uppercase;   padding: 9px 50px 10px 50px;    text-decoration: none;
   } #mbtnav li a:hover, #mbtnav li a:active {    background: #ffffff;    color: #000000;    display: block;    text-decoration: none;    margin: 0;    padding: 9px 50px 10px 50px;    }#mbtnav li {    float: left;    padding: 0; } #mbtnav li ul {    z-index: 9999;    position: absolute;    left: -999em;    height: auto;    width: 160px;    margin: 0;    padding: 0; } #mbtnav li ul a {    width: 140px; } #mbtnav li ul ul {    margin: -25px 0 0 161px; } #mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {    left: -999em; } #mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {    left: auto; } #mbtnav li:hover, #mbtnav li.sfhover {    position: static; }#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {    background: transparent;    width: 90px;    color: #de4953;    display: block;    font:normal 16px Oswald, sans-serif;    margin: 0;    height:45px;   padding: 9px 12px 10px 12px;    text-decoration: none; z-index:9999; border-bottom:0px dotted #333;   } #mbtnav li li a:hover, #mbtnavli li a:active {    background: transparent;    color: #47d3e6;    display: block;   margin: 0;    padding: 9px 12px 10px 12px;
        text-decoration: none;
De este código hay muchos aspectos que, la barra que tengo ahora en mi blog no contempla, porque no tiene submenús, por ejemplo. No obstante, es el código que tengo, que antes si que los tenía. Me gusta dejar todo el código escrito por si más adelante cambio de opinión y quiero volverlos a añadir. Además, si os soy sincera, ahora mismo soy incapaz de recordar, exactamente, que podría quitar sin que afectase a la barra actual.
Básicamente, tenéis que ir línea por línea modificando lo que os apetezca. Para consultar los colores, podéis visitar esta página web que os da el código del color que elijáis. 
La mejor opción, es que vayáis modificando todo lo que creáis conveniente, como el ancho, el color, etc. Si que os diré que lo que hace que se mantenga fija es el comando "display: block".
Una vez tengáis esto puesto en vuestra plantilla, guardáis cambios y en la pestaña de diseño, añadís un widget nuevo de HTML, encima de la cabecera.

En ese widget, ponéis lo siguiente:
<div align="center"><div id='mbtnavbar'>      <ul id='mbtnav'>        <li>          <a href='http://www.lauritapurple.com'>Home        </li>           <li>          <a href='http://www.lauritapurple.com/p/about.html'>Sobre mí
        </li>  <li>           <a href='http://www.lauritapurple.com/p/contacto.html'>Contacto                   </li>      </ul>
    </div></div>
Dónde deberéis cambiar las urls y las palabras que aparecerán en la misma barra. Si os fijáis, este código, llama al que está en plantilla mediante "div id='mbtnavbar'". Por ello es importante que tengan el mismo nombre en los dos sitios.
A base de prueba y error es como conseguiréis la barra que mejor se adapte a vuestro blog.
¡Espero que os haya servido!