Sencillo menú con CSS

Los menús son una pieza importante en el blog porque nos ayudan a ordenar el contenido, resulta igual de útil un menú creado con scripts y efectos fantásticos que el más sencillo creado con CSS. En la variedad está el gusto y tenemos multitud de páginas para escoger.

• HOME
• Enlace-1
• Enlace-2
• Enlace-3
• Enlace-4

Este menú es fino y muy sencillo y añadiendo los colores acordes con el blog el resultado puede ser muy agradable.

Para añadirlo son dos sencillos pasos. Nos situamos en plantilla Edición de HTML y justo antes de ]]></b:skin> añadimos los estilos.

#navigation {
margin-left:100px; /*  Margen izquierdo  */
top:25px; /* Margen superior  */
}
#navigation li {
float:left;
}
#navigation a {
background-color:#000000;  /*  color de fondo  */
border-bottom:3px solid #FFFFFF; /*   Línea inferior   *
color:#FFFFFF; /*   Color de texto   */
display:inline-block;
font-size:13px; /*  Tamaño de fuente  */
font-weight:normal;
margin-right:1px;
padding:10px 20px 10px; /*  Anchura y altura de las pestañas   */
text-decoration:none;
text-transform:uppercase; /*  Letra mayúscula  */
text-shadow:0 1px 1px #CDCDCD ;/*   Sombra texto   */
}
#navigation a:hover {
border-bottom:3px solid #05C7C0; /*  Linea inferior al pasar el cursor (hover)  */
color:#05C7C0; /*  Color al pasar el cursor (hover)  */
}
#navigation li.selected a {
border-bottom:3px solid #05C7C0; /* Color linea inferior fija (Home)  */
color:#05C7C0; /*  Color texto fijo (Home)  */
}
#navigation ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
}

Luego editamos un gadget de HTML y en su interior añadimos lo siguiente:

<div id='navigation'>
<ul>
<li class='selected'><a href='#'>HOME</a></li>
<li><a href='#'>Enlace-1</a></li>
<li><a href='#'>Enlace-2</a></li>
<li><a href='#'>Enlace-3</a></li>
<li><a href='#'>Enlace-4lt;/a></li>
</ul>
</div>

❋ El texto Home lo podemos sustituir por cualquier otro, Inicio, Página principal... es el texto que enlazará la url de nuestro blog, la copiaremos de la barra del navegador y la pegaremos sustituyendo la almohadilla #

❋ Lo mismo haremos con el resto de enlaces, sustituimos la almohadilla por la url que vamos a enlazar. En Enlace-1, 2, 3, 4 añadimos el texto asociado con cada enlace.