Menú CSS simple para Blogger

Este menú css es bastante simple y no necesita configuraciones complicadas, sólo añadir o quitar los enlaces y añadir las urls correspondientes con el título.

Ejemplo del menú CSS:

Paso 1: Añadiendo el menú:

Primero, vamos a ''Diseño/Edición HTML'' marcamos ''Expandir plantillas de artilugios'', y buscamos la siguiente línea:

<div id='content-wrapper'>

Debajo de ésta, pegaremos el siguiente código:

 <ul class='menu ayudabloggers'>
<li><a href='URL1' title=''>Enlace Uno</a></li>
<li><a href='URL2' title=''>Enlace Dos</a></li>
<li><a href='URL3' title=''>Enlace Tres</a></li>
<li><a href='URL4' title=''>Enlace Cuatro</a></li>
<li><a href='URL5' title=''>Enlace Cinco</a></li>
<li><a href='URL 6' title=''>Enlace Seis</a></li>
</ul>

Paso 2: Agregando estilos:

Ahora buscamos la siguiente zona:

]]></b:skin>

Sobre ésta, pegamos el siguiente código:

ul.menu {
list-style-type:none;
width:auto;
position:relative;
display:block;
height:33px;
font-size:.6em;
font-family:Verdana,Helvetica,Arial,sans-serif;
border:1px solid #dadada;    /* color del borde */
margin:0;
padding:0;
}
ul.menu li {
display:block;
float:left;    /* orientación del menú */
margin:0;
padding:0;
}
ul.menu li a {
float:left;
color:#fff; /* color del texto */
text-decoration:none;
height:24px;    /* alto del menu */
padding:9px 15px 0;
font-size:14px;    /*Tamaño de fuentes*/
}
ul.menu li a:hover,.current {
color:#000;  /*color de texto al pasar por encima */
text-decoration:none;
}
ul.menu .current a {
color:#fff;    /* color de texto */
font-weight:700;
}
ul.menu.ayudabloggers{
background-color:#000;    /* color de fondo */
}
ul.menu.ayudabloggers li a:hover, .menu.ayudabloggers li.current {
background-color:#dadada;    /* color de fondo al pasar el mouse */
}

Previsualizamos los cambios y si es satisfactorio, guardamos la plantilla:

Consideraciones:

• Puedes situar el menú en donde quieras, por defecto se situará entre la cabecera y las entradas.
• Recuerda que puedes personalizar el menú con colores, bordes, etc.
• Si deseas agregar otro enlace, simplemente añade esta línea:

<li><a href='URLEXTRA' title=''>Enlace Extra</a></li>

Deberás situarla antes de </ul> del primer código.