2 sencillos pasos para crear tu propio menú CSS personalizable en Blogger.

Si es la primera vez que visitas este sitio, no olvides suscribirte al feed RSS o participar como blogger invitado. Gracias por tu visita!

Mediante la utilización de hojas de estilo en cascada (CSS) es posible crear menús interactivos y visualmente agradables con tan sólo incluir unas cuantas líneas de código, sin necesidad de añadir scripts o imágenes demasiado pesadas, que podrían aumentar considerablemente el tamaño de tu blog y con ello el tiempo de carga del mismo. El código CSS define la presentación y la apariencia del contenido HTML al que hace referencia, a través del empleo de unas etiquetas determinadas.

A continuación, encontrarás las instrucciones necesarias para crear tu propio menú CSS totalmente personalizable y para incluir el código en tu plantilla de Blogger. Si no estas muy familiarizado con el uso de este lenguaje, puedes encontrar más información al respecto aquí: ¿Qué es CSS?.

En principio, podemos diferenciar entre dos tipos de menús CSS en función de la posición en la que desees situarlo, aunque existen infinidad de posibilidades que dependen de tu propia imaginación:

Menú horizontal.

- Html.

Añade un nuevo elemento de página HTML/Javascript en las opciones de edición de tu plantilla e inserta el siguiente código:

<div id=”navcontainer”>
<ul id=”navlist”>
<li id=”active”><a href=”http:…” id=”current”>Título 1</a></li>
<li><a href=”http:…“>Título 2</a></li>
<li><a href=”http:…“>Título 3</a></li>
<li><a href=”http:…“>Título 4</a></li>
<li><a href=”http:…“>Título 5</a></li>
</ul>
</div>

Antes de guardar los cambios, debes modificar los títulos que deseas que aparezcan en el menú y las direcciones a las que vincularán, ambos señalados en negrita. A continuación, abre el modo de edición HTML de tu plantilla en Blogger.

- CSS.

Una vez creadas las secciones correspondientes y los vínculos de las mismas para tu menú, las someteremos a una cirugía estética avanzada de la mano del doctor CSS. Deberás colocar el siguiente bloque de código en la zona de tu plantilla donde se encuentran el resto de estilos CSS (entre las etiquetas “head” en caso de usar la plataforma de Blogger o bien en la hoja de estilos en el caso de Wordpress):

#navcontainer { /* Hace referencia al contenedor del menú */
}

ul#navlist
{
margin: 0;
padding: 0;
list-style-type: none;
white-space: nowrap;
}

ul#navlist li
{
float: left;
font-family: verdana, arial, sans-serif;
font-size: 9px;
font-weight: bold;
margin: 0;
padding: 5px 0 4px 0;
background-color: #eef4f1;
border-top: 1px solid #e0ede9;
border-bottom: 1px solid #e0ede9;
}

#navlist a, #navlist a:link
{
margin: 0;
padding: 5px 9px 4px 9px;
color: #95bbae;
border-right: 1px dashed #d1e3db;
text-decoration: none;
}

ul#navlist li#active
{
color: #95bbae;
background-color: #deebe5;
}

#navlist a:hover
{
color: #74a893;
background-color: #d1e3db;
}

- Resultado.

Menú vertical.

- Html.

Al igual que en el menú horizontal, debes crear un nuevo elemento de página HTML/Javascript e insertar el siguiente código, modificando los títulos y las direcciones señaladas en negrita:

<div id=”navcontainer”>
<ul id=”navlist”>
<li id=”active”><a href=”http:…” id=”current”>Título 1</a></li>
<li><a href=”http:…“>Título 2</a></li>
<li><a href=”http:…“>Título 3</a></li>
<li><a href=”http:…“>Título 4</a></li>
<li><a href=”http:…“>Título 5</a></li>
</ul>
</div>

- CSS.

En este caso, vamos a utilizar dos imágenes diferentes para producir un efecto visual distinto al pasar el raton por encima de las secciones. Si no deseas incluir ninguna imagen, sólamente tienes que eliminar el valor “background-image” donde corresponda.

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}

#navcontainer li { margin: 0 0 3px 0; }

#navcontainer a
{
display: block;
padding: 2px 2px 2px 24px;
border: 1px solid #333;
width: 160px;
background-color: #999;
background-image: url(http://img524.imageshack.us/img524/9312/l1downrd4.gif);
}

#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}

#navcontainer a:hover
{
border: 1px solid #333;
background-color: #F60;
background-image: url(http://img147.imageshack.us/img147/4756/l1overra1.gif);
color: #333;
}

#active a:link, #active a:visited, #active a:hover
{
border: 1px solid #333;
background-color: #FF6600;
background-image: url(http://img147.imageshack.us/img147/4756/l1overra1.gif);
color: #333;
}

- Resultado.

Si no estás demasiado familiarizado con este tipo de código fuente, aquí tienes una breve descripción de cada uno de los valores más importantes para transformar el diseño del menú y personalizarlo a tu gusto:

Border. Define el grosor, el tipo y el color del borde del elemento correspondiente. Los tipos de bordes posibles son solid, dotted, dashed, groove, inset, outset, double y ridge.

Margin. Indica el valor del margen exterior en píxeles.

Padding. Establece la separación del objeto en cuestión, rellenando el vacío interior con las medidas que se determinen. Puede tener hasta cuatro valores posibles (Ej. padding: 5px 10px 4px 3px;) ordenados en función de su dirección, que es arriba, derecha, abajo e izquierda, en este orden.

Color. Señala el color del texto.

Background-color. Determina el color de fondo de la etiqueta.

Si deseas modificar cualquier otro aspecto del menú, tienes alguna duda sobre el resto de valores o simplemente deseas aportar algo más a esta entrada deja tu comentario en el blog. Gracias.

Links relacionados:

Conceptos básicos sobre CSS.
Tutorial de posicionamiento y layout en CSS.
Manual sobre CSS descargable.

Si te ha gustado este post, puedes subscribirte gratis al Newsletter de Zona Cerebral y recibir las actualizaciones en tu-email.

Recibe las actualzaciones del blog suscribiéndote al feed RSS de Zona Cerebral!